Простым языком о несложных вещах: свойство hasLayout

Понедельник, 19 Янв 2009 17:06

Целью данной статьи не будет подача читателю 100% исчерпывающих фактов, правил, определений, причин появления и способов устранения багов, связанных со свойством hasLayout, так как такая информация уже давно существует, и ссылки на нее приведены в конце поста.

Напротив, в данной статье мы рассмотрим свойство hasLayout с практической стороны, посмотрим на него выпученными глазами ошарашенного кодера после того как, сверстав сайт на основе плавающей (float) модели для gecko и других нормальных браузеров, он открыл его в IE6 ))...

Знакомая ситуация? Тогда эта статья для вас.

Итак, начать стоит с того, что свойство hasLayout — родное свойство (прикол мелкомягких программистов, ошибка их генетических экспериментов) браузера Internet Explorer!

То есть, если вы, как полностью уважающий себя кодер, решили, что ТАКОЙ браузер как IE не стоит вашего драгоценного внимания и нервов, чтобы под него верстать — то можете спокойно закрывать вкладку и искать в Интернете статьи о том, как выравниванить содержимое ячеек таблицы по вертикали.

Если же вы все-таки относитесь к меньшинству, появившемуся, полагаю, с первой версией IE и называемому «верстальщик разумный» («html-coder erectus» или как-то так в переводи с латыни)  — продолжим.

Как говорится в переводе официальной статьи об этом свойстве: hasLayout — свойство «позиционирования», которое является приоритетным свойством IE/win и определяет, как элементы на странице взаимодействуют между собой (расчитываются), реагируют на события, прорисовываются.

Чем нам интересно это свойство? Да тем, что благодаря его правильному применению можно исправить абсолютное большинство багов браузера Internet Explorer! К тому же это часто помогает решить проблемы с использованием float-модели для IE6 (в IE7 с ней тоже далеко не все гладко, но уже вполне сносно), а разве не об этом мечтает каждый кодер?!

Свойство hasLayout присвоено некоторым элементам документа по умолчанию:

  • <html>, <body>
  • <table>, <tr>, <th>, <td>
  • <img>
  • <hr>
  • <input>, <button>, <select>, <textarea>, <fIeldset>, <legend>
  • <iframe>, <embed>, <object>, <applet>
  • <marquee>

на остальных оно отсутствует и может быть установлено при помощи некоторых приемом.

Перечень приемов, наиболее часто помогающих на моей практике (полный перечень в офф. документации):

  • устанавливаем для элемента фиксированные ширину или высоту (width/height: значение) в зависимости от ситуации (width/height: 1% — часто помогающий прием).
  • все еще не помогло? Пробуем первое в комбинации с overflow: hidden. Данная комбинация может исправить ситуацию только для IE7, так как только в этой версии движка IE свойство overflow стало устанавливать на элемент hasLayout. Помогает не менее часто.
  • пробуем свойство zoom: 1 !important. Вообще свойство zoom (масштаб) создано для браузеров для того, чтобы, соответственно, масштабировать элементы, а не устанавливать hasLayout. Но поскольку в век браузеров, которые сами все что угодно масштабируют, а величины постепенно переходят на запись в px вместо em, это свойство не нашло практического применения, то используют его для IE фикса.

Примечание: часто бывает, что IE неправильно отрисовывает элементы из-за их большой вложенности. Попросту говоря, на определенном этапе могут теряться правильные размеры для одного из вложенных элементов и тогда, естественно, все идет наперекосяк. В таких случаях нужно экспериментально определить, на каком именно шаге происходит неправильный расчет элементов и именно элементу-виновнику присвоить zoom: 1 !important, что, кстати, эквивалентно записи zoom: 100% !important

  • min/max-height/width: значение — сработает, естественно, только для IE7, но это уже как минимум полбеды
  • position: fixed, position: absolute. В IE существует один презабавнейший баг, который я как-нибудь опишу в одном из постов и который мне удалось исправить благодаря именно использованию абсолютного позиционирования. Правда здесь прийдется еще попотеть, думая, на что повесить релатив, но в любом случае ситуация разрешима.

Считается, что элементу присуще свойство hasLayout, если его параметр, который можно проверить при помощи выражения: document.getElementById('element_id").hasLayout='true', и наоборот, если этот параметр равен 'false'.

Сбросить свойство hasLayout без труда можно, если указанным выше css свойствам назначить их дефолтовые (по умолчанию) значения: position: static, width/height: auto к примеру.

Назначить hasLayout в 'true' также без труда можно через различные хаки, Conditional Comments и другие общеизвестные для IE вещи.

Самым лучшим, но, к сожалению, не самым правдивым инструментом в борьбе с ламающейся версткой в браузере IE является IE Developer Toolbar, качаем который с офф. сайта.

А теперь, как я и обещал, немного практики. Допустим, вы сверстали страницу, которая отлично показывается в FF, Opera, Safari, Chrome, но IE никак не поддается тому, чтобы повторить все за собратьями. В таком случае, если вы абсолютно уверены, что проблема не в банальном незакрытом теге и неправильном задании значений, на что первые 4 браузера иногда могут закрыть глаза, то попробуем поэкспериментировать с hasLayout.

Примечание: если что-то не так уже в IE7, то не советую откладывать на потом проверку этого же «прикола» и в IE6, так как оба браузера в большом (но не во всех!) количестве случаем повторяют одни и те же ошибки.

свойство hasLayout

Скачали IE Developer Toolbar, установили его, теперь открываем его либо с помощью стрелочки на панели над строкой адреса, либо же из свернутого меню в правой части в IE7.

свойство hasLayout

Далее, убедившись, что стрелочка активна, выбираем при помощи нее интересующий нас элемент и в поле для ввода значений можем прописать этому элементу любое интересующее нас свойство или же изменить значения уже существующих свойств. Проходим по пунктам из списка способов установки hasLayout в 'true', экспериментируем, вообщем. И, если на этом этапе вы все сделали правильно и ошибка была именно в неправильном «позиционировании» в IE, то будет вам счастье!

SEO верстка: создаем SEO оптимизированный layout

У проги вообще есть немало возможностей, с которыми рекомедую вам разобраться самим.

И в заключение ссылки, которые помогли мне при написании данного материала и по которым вы сможете найти более подробную (что не значит более доступную) информацию о свойстве hasLayout:

К вопросу о свойстве Layout
Изучаем наличие layout

http://blogto4ka.ru

RSS комментариев

Один комментарий Комментировать

  1. Наташенька пишет:

    02 Фев 2009 в 18:24 Reply to this comment

    1

    Спасибо очень полезная и познавательная статья !

    Автору спасибо

Оставьте свой комментарий о материале
(Комментарии со ссылками попадают на модерацию. Остальные не попадают, но я могу удалять те, которые посчитаю бесполезными, не несущими смысловой нагрузки)