hasLayout

Загадочное свойство hasLayout

Для отображения элементов и учёта их взаимодействия между собой, разработчики IE внедрили в этот браузер уникальное свойство hasLayout, значением которого выступает true или false. «Установить hasLayout» означает задать ему значение true, а «убрать hasLayout» говорит о том, что это свойство не задано или у него значение false.

Большинство имеющихся ошибок в IE6, IE7 связано, так или иначе, именно со свойством hasLayout. В IE8 оно было снято, что с одной стороны хорошо, но с другой повлияло на то, что IE разных версий отображают одну и ту же страницу совершенно по-своему. Поэтому важно понимать, как работает это свойство и какую роль выполняет.

Схлопывающиеся отступы

При рассмотрении блочной модели была затронута тема схлопывания отступов. Этот эффект наблюдается, когда у блочных элементов расположенных рядом друг с другом по вертикали, отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Этот эффект работает только для блоков, у которых не заданы поля и границы. Для отступов слева и справа схлопывание никогда не применяется.

Несмотря на загадочность, схлопывание несёт в себе сугубо практическое значение и в первую очередь предназначено для корректного отображения текста. Расстояние между абзацами (тег <p>) без схлопывания увеличится в два раза, тогда как верхний отступ первого абзаца и нижний отступ последнего абзаца останутся неизменными. Схлопывание гарантирует, что расстояние в абзацах везде будет одинаковым.

Ошибка с блочными ссылками в IE6

В IE6 содержится некоторое количество ошибок, так или иначе связанных со свойством hasLayout. Непосредственно установить его нельзя, но можно сделать это косвенно. Так что большинство проблем связанных с этим свойством можно исправить его установкой, добавляя в стилях элементу zoom: 1 или height: 1%. Эти свойства кроме своих непосредственных характеристик устанавливают hasLayout.

Блочные ссылки это приём, который активно используется в различных меню, таким способом повышается полезная площадь ссылки. В IE6 если ссылка установлена блочной с помощью display: block она не занимает доступное пространство родителя и ссылкой является только текст. Эта ошибка проявляется в том случае, когда к родителю добавляется свойство float (пример 1).

Обзор HasLayout

Некоторые ошибки в Internet Explorer можно обойти, установив для элемента «лейаут». Большинство пользователей не подозревают о значениях «лейаута» применяемого к элементу. Данный документ объясняет, что происходит, когда элемент содержит «лейаут» и последствия этого.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.