Коварный pixel!

Последние несколько недель я занимаюсь, если так можно выразиться, "саморазвитием" - создаю некое подобие интерактивного портала на PHP + JavaScript. Ну, а чтобы жизнь совсем уж медом не казалась, клиентскую часть решено было создавать исключительно с применением чистого JavaScript. Бесспорно, мне известно, что существуют различные библиотеки на JS, призванные облегчить жизнь web-девелопера, но для меня это больше "спортивный интерес", достичь требуемой функциональности безо всякой посторонней "химии" ;-).

Так в своей работе я подошел к моменту, который, наверное, возникает у каждого кодера под веб - создание некоего "модального окна" с элементами формы. 

Задача для большинства уже тривиальная и останавливаться на её реализации, полагаю, не стоит. Тем более, что в большинстве библиотек это вообще считай штатный функционал. Скажу лишь, что для себя я решил эту задачу в процедурном стиле и у меня получилась функция, принимающая на входе размеры "окна", а на выходе возвращающая ссылку на созданное "окно" или null.

Тестирование в актуальной версии Chrome, FireFox, а так же MS Internet Explorer 8 (та минимальная версия, на которую я решил ориентироваться в части "совместимости" кода) показало полную работоспособность и было принято решение перейти к следующему этапу разработки, благо задач еще хватает :-).

И вот, когда я как-то с рюмкой чая любовался своим бесподобным стилем, привнесенным скучному элементу DIV, совершенно случайно выяснилось, что создаваемое моей функцией "окно" ведет себя совершенно не так, как ожидалось в одной из версий IE - в 9-ой! К слову, для тех, кто не знает, в IE начиная с восьмой версии в "Средствах разработчика" (F12) есть очень удобный функционал проверки создаваемых веб-страниц через изменение режима обозревателя. В новом браузере MS Edge, например, можно посмотреть как будет вести ваша верстка и код начиная с IE5 и заканчивая самим Edge. Но почему-то там нет IE6... Но речь то не об этом. "Окно" созданное с помощью моей функции в IE9 категорично отказывалось принимать требуемые размеры, а вместо этого растягивалось на весь экран браузера. 

Нутром то я понимал, что всему "виной" свойства top, bottom, left и right установленные в "0" (для тех, кто не знает - это способ центрирования по вертикали элемента с фиксированной высотой), но и IE8 и IE10 отрабатывали как положено. Запрос в Google не показал наличие проблемы как таковой, а все, что было найдено, решалось тестом на внимательность.

Пошаговая трассировка кода показала, что IE9 игнорирует установку значений высоты и ширины элемента, хотя эти свойства содержали требуемые значения и какой-нибудь

alert(element.style.width);

обязательно его демонстрировал.

"Магия!" - скажете Вы? Вот и я сначала так подумал, пока не припомнил, что ранее у меня была аналогичная непонятная ситуация с размерами динамично создаваемого элемента (правда тогда это было в FireFox) и решилась она весьма лаконично... "по стандарту"...

Проинспектировав тот код и сравнив с "проблемным" ничего не оставалось как принять позу "рукалицо". Размерность, будь она не ладная :-)). В коде генерации "окна" была утеряна размерность и простейшая приписка к выражению задающему размеры окна "+ 'px'" решила все :-). Так в соответствии со стандартом размерность элемента должна быть указана в обязательном порядке, иначе браузер не гарантирует корректное отображение элемента. И хотя, как показывает практика в том числе, все современные браузеры по умолчанию считают размеры в пикселях (px), не стоит уповать на это. 

О чем этот пост? Нет, не о хитрых решениях, конечно же, а о внимательности и знании стандарта языка, пусть даже и языка разметки текста. О понимании специфики реализации этих самых "стандартов" различными браузерами. Не буду говорить за всю сферу всевозможного программирования, но, по-моему, разработка клиентской стороны в вебе это самое нудное занятие :-)). Нюансов вагон и маленькая тележка... Отдаю должное людям, знающим эту сферу на профессиональном уровне :-))).

Со своей же стороны призываю быть внимательными и еще раз внимательными ;-).

P/s Кому интересна тема размерности в CSS советую почитать вот эту статейку. Можно почерпнуть много интересной информации.