Характеристики свойства
В каких браузерах работает?
| 6.0+ | - | - | - | - | - | - |
В каких версиях CSS используется?
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| - | - | - | - |
Для чего используется?
Разработчики Internet Explorer придумали особое свойство, которое обрабатывает и оптимизирует стилевое оформление для объектов верстки. Суть понятия этого инструмента заключается в способности элемента определять свои размеры и выводится на веб-странице. Эта способность была названа разработчиками Layout. Таким образом, все объекты верстки можно поделить на 2 группы: те, которые имеют эту способность (Layout), и те, у которых ее нет. Ко второй группе относятся элементы, которые полностью зависят от своих родителей, другими словами они не отвечают за свои размеры и особенности отображения, а полностью копируют поведение родительского блока.
В качестве значений для hasLayout используется всего два кодовых слова: true, если условие должно подтвердиться, или в противном случае false. Если явно значение для вендорного свойства не указывается, то браузер срабатывает так же, как если бы было бы прописана команда true.
Особенность применения hasLayout не похожа на прочие вендорные свойства, его в файле CSS применять нельзя, так как оно создавалось для внутреннего использования. Однако допускается косвенное применение. Важно знать, что возможен вариант, когда свойство прописано для объекта по умолчанию.
Ниже представлена таблица, в которой указаны элементы, для которых по умолчанию установлен hasLayout со значением true.
| img | table | tr | td |
| th | html | body | frameset |
| frame | iframee | button | fieldset |
| input | legend | select | textarea |
| embed | object | applet | marquee |
Также hasLayout устанавливается в случае применения следующих свойств со значениями, которые указаны в этом списке.
- display: inline-block;
- position: absolute;
- float: left | right;
- width: все доступные значения, за исключением auto;
- height: все доступные значения, за исключением auto;
- writing-mode: tb-rl;
- zoom: 1;
Также следует знать, какой эффект оказывает hasLayout на объект:
- Оказывает негативное влияние на плавающие объекты.
- Исключает процесс схлопывания для интервалов между объектами.
- Списки начинают конфликтовать со свойством hasLayout.
- Усложняет процесс обработки ресурса браузером из-за вспомогательных операция расчета габаритных размеров элементов.
В той же степени следует обозначить ряд типичных проблем вышеупомянутого браузера, которые решаются рассматриваемым свойством:
- вывод контейнеров, которым присущи свойства плавающего элемента;
- устраняет проблемы расчета внешних и внутренних отступов между родителем и его детьми;
- ликвидируется баги блочных элементов;
- оптимизирует отображение абсолютно и относительно позиционированных блоков.
Это только важнейшие проблемы, которые являются верхушкой айсберга. Полный перечень можно найти на сайте разработчиков Internet Explorer.
Подводя итог, стоит отметить важность понимания понятия Layout и умение оперировать свойством hasLayout. Очень важно последнее, так как в файле CSS свойство не фигурирует, а присваивается косвенным путем, а именно через те характеристики, которые изначально, в соответствии со спецификацией, обладают способностью Layout. В тоже время применение данного свойство позволит избежать многих багов, которые присущи именно Internet Explorer. Собственно, разработчики компании Microsoft внедряли понятие Layout именно по этой причине. Таким образом, рассматриваемое свойство в умелых руках станет мощнейшим оружием в борьбе со странностями Internet Explorer.
Пример использования
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Свойство hasLayout</title> <style> .shadow { background: #eee; padding: 25px; zoom: 1; } </style> </head> <body> <div class="shadow"> Content. </div> </body> </html>