| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0 + | 8.0 + | ||||||
Коротка інформація
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис ание
Для відображення елементів і обліку їх взаємодії між собою, розробники IE впровадили в цей браузер унікальну властивість hasLayout, значенням якого виступає true або false . «Встановити hasLayout » означає поставити йому значення true, а «прибрати hasLayout »говорить про те, що ця властивість не задана або у нього значення false .
Безпосередньо задати це властивість через стилі неможливо, тому що воно розроблялося для внутрішніх цілей, фактично в CSS його немає. Але можна це зробити побічно, причому у деяких елементів воно вже стоїть за умовчанням, а в інших ні.
Елементи, у яких завжди встановлено властивість hasLayout :
- зображення (тег <img> );
- таблиці ( <table> ), їх рядки ( <tr> ) і осередки ( <td> , <th> );
- лінії ( <hr> );
- структурні елементи ( <html> , <body> );
- фрейми ( <frameset> , <frame> , <iframe> );
- деякі елементи форм ( <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.
В IE7 крім перерахованих властивостей hasLayout встановлюють наступні:
- position: fixed ;
- overflow: hidden | scroll | auto;
- overflow-x: hidden | scroll | auto;
- overflow-y: hidden | scroll | auto;
- min-width: будь-яке значення крім auto;
- max-width: будь-яке значення крім auto;
- min-height: будь-яке значення крім auto;
- max-height: будь-яке значення крім auto.
Прибрати hasLayout можна додаванням до елементу одного з наступних властивостей і значень:
- position: static;
- float: none
- width: auto;
- height: auto;
- overflow: visible;
- writing-mode: lr-tb | rl-tb | bt-rl;
- zoom: normal.
Властивість hasLayout надає наступну дію на елементи веб-сторінки.
- Викликає проблеми з плаваючими елементами.
- Скасовує схлопування відступів.
- Приводить до різних проблем при відображенні списків.
- Збільшує використання пам'яті через те, що браузеру доводиться проробляти більше операцій по обчисленню розмірів і положення елементів.
- Висота шару незалежно від встановленого значення height підлаштовується під контент.
Приклад
HTML5 CSS2.1 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
Асортиментна політика </title>
<style>
.shadow {background: #fc0; padding: 10px; filter: progid: DXImageTransform.Microsoft.dropshadow (OffX=5, OffY=5, Color='gray', Positive='true'); zoom: 1; /* Додаємо hasLayout */ } </style>
</head>
<body>
<div class="shadow">
Асортиментна політика підприємства підсвідомо концентрує конвергентний конкурент, враховуючи результат попередніх медіа-кампаній. </div>
</body>
</html>
В даному прикладі щоб працювало властивість filter в IE6 і в IE7, додано zoom яке встановлює hasLayout .