Вы наверно слышали про haslayout в ие. Давайте разберемся, что это такое.

Полная и хорошая статья про haslayout находится здесь: Изучаем наличие layout. Читать её нужно обязательно всем верстальщикам. В этой статье написано много букв, и поэтому для лентяев и у кого мало времени быстренько на пальцах объясню, что это такое.

Что такое haslayout

Haslayout — «свойство» элементов исключительно в ie под Windows. Некоторые элементы этим «свойством» обладают сразу, т.е. haslayout=true. Другим элементам, если нужно, его можно задавать.

Для чего нужен haslayout

Haslayout нужен для исправления множества несоответствий веб-стандартов у ie. Т.е. с помощью haslayout-а можно «манипулировать», как тот или иной эелемент будет отображаться в ie.
Под «множеством несоответствий веб-стандартов у ie» я имею ввиду непонятные глюки, которые выскакивают у ие при верстки, например такие, как совсем непонятные: пропадание текста у блоков (бывало, что текст просто тупо пропадал, занимая то место, которое должен был занимать, т.е. как-будто включено свойство visibility:hidden), хотя пробным путем было выяснено, что пропадание текста бывает из-за переборщения float-ов и position-ов. Так же бывало, что текст непонятным образом «улетал» за пределы блока. Вобщем, я имею ввиду, что haslayout не решит все ваши проблемы в ie.

Как включить haslayout

Прямого css свойства haslayout нет. Его можно включить, используя некоторые css свойства. Haslayout имеют некторые элементы по-умолчанию, это такие элементы как htm, body, table, tr, th, td, img, hr, input, button, select, textarea, fieldset, legend, iframe, embed, object, applet, marquee — список взял из статьи, приведенной выше. Включить haslayout можно с помощью CSS:

1
2
3
4
5
6
7
8
9
10
11

.container{
     zoom:1; /*Самое распространенное. Кстати, это свойство не валидно*/
     height:1%;
     position:absolute;
     position:relative;
     overflow: hidden;
     float:left;
     float:right;
     display: inline-block /* Когда нужно сделать haslayout инлайн элементу */
    /* И другие...*/
}

Примеры, где haslayout помогает в вёрстке

1. Смотрите Альтернативное решение отдельного слоя с clear:both, где чтобы ублажить ие, исользуем zoom:1.
2. При непонятном пропадании текста в ие. Такое встречается очень редко, но бывает, и код я вам повторить не могу. Но оно лечится либо с помощью zoom:1, либо с помощью position:relative, либо с помощью overflow: hidden. Если и после этого текст все-равно пропадает, просто переверстайте и не мучайтесь
3. При непонятном «вылетании» блоков, текста за пределы внешнего контейнера. Это тоже лечится с помощью haslayout.
4. При непонятном наличии лишних отступов у блоков, списков.
И так далее.
Вобщем, если вы видите в ие какой-то не естественный глюк, попробуйте для этого или внешнего элемента включить haslayout. В большинстве случаев помогает.

Метки: haslayout, ie

Запись опубликована 04.07.2009 в 00:19 и размещена в рубрике css, html. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.