Що ще за HasLayout і чому він такий важливий?
Деякі помилки в Internet Explorer можна обійти, встановивши для елемента "лейаут". Більшість користувачів не підозрюють про значення "лейаута" застосовується до елемента. Даний документ пояснює, що відбувається, коли елемент містить "лейаут" і наслідки цього.
Англійське слово layout можна перевести як "макет", але в даному контексті воно означає внутрішню структуру даних IE. Щоб не було плутанини з термінологією, в статті layout вказується як "лейаут".
Почнемо з того, що є два набори елементів.
- Елементи, які покладаються на батьків для визначення розмірів і впорядкування їх змісту.
- Елементи, які відповідають за розміри і упорядкування власного змісту.
В основному, елементи в Internet Explorer не відповідають за організацію самих себе. тег
може мати положення, як в вихідному коді і потоці документа, але їх контент впорядковує найближчий предок з лейаутом (зазвичай). Такі елементи покладаються на предка, щоб він зробив для них всю важку частину за визначенням розміру і одиниць вимірювання.
Елемент, який відповідає за розміри і розташування елементів, може бути предком, а не тільки безпосереднім батьком. Основною перевагою кожного елемента, у якого немає власного лейаута, є продуктивність і простота.
Отже, що означає "має лейаут"?
- Якщо коротко, включення лейаута означає, що елемент відповідає за розміри і позиціонування самого себе і можливо будь-яких дочірніх елементів (якщо дочірній елемент має власний лейаут, то він визначає розміри).
- Деякі "фіксовані" елементи, іншими словами, мають обмеження розміру завжди мають лейаут. Наприклад, кнопки, зображення, поля форм, теги і завжди вихідного розміру, якщо ширина і висота явно не вказана.
- Іноді елементи, яким зазвичай не потрібна інформація про лейаут, на кшталт
Чому лейаут такий важливий?
Які елементи завжди мають лейаут?
- Зображення.
- Таблиці, їх рядки (
Які елементи можуть отримати лейаут?
- Блокові елементи з width або height в строгому режимі.
- Будь-який елемент із заданим width або height в режимі сумісності.
- Елемент, у якого встановлено властивість zoom.
- Елементи в режимі редагування.
- Елементи, які беруть поведінку viewlink.
- У яких порядок виведення відрізняється від батьківського (справа наліво замість зліва направо).
значення HasLayout
За цим посиланням міститься список відомих обхідних шляхів, які встановлюють лейаут без візуальних змін. Якщо ви бачили або використовували їх, то знайте про наслідки.
Сценарій 1. Обтікання
Давайте розглянемо наступний код
Швидка лисиця перестрибнула через ледачу собаку.
Швидка лисиця перестрибнула через ледачу собаку.
Швидка лисиця перестрибнула через ледачу собаку.
Швидка лисиця перестрибнула через ледачу собаку.
Швидка лисиця перестрибнула через ледачу собаку.
Чого ми очікуємо?
- Текст красиво обтікає навколо лівого плаваючого
Що станеться, коли ми застосуємо лейаут до з текстом?
- Застосування лейаута встановлює як прямокутний блок.
- Текст не обтікає більше
Це дуже важливо, тому що руйнує очікуване поведінка розмітки тексту (уявіть, що ви застосували лейаут до тегу
Чого ми очікуємо?
позиціонується абсолютно, пов'язаний з блоком контенту і виведений з потоку.Що трапиться, якщо застосувати лейаут до
тепер має власний лейаут і повністю ігнорує всі "вимоги" батька.Сценарій 3. position: relative
Давайте тепер подивимося приклад, в якому hasLayout використовується, щоб обійти помилку.
Ми очікуємо, що IE надасть наступний результат.
- Вийде суцільна синя лінія товщиною 4px (вона схлопивается, тому що дочірній об'єкт був видалений з потоку).
- Червона рамка буде містити зображення з зеленої кордоном.
Повинно це виглядатиме таким чином.
В IE6 нас чекає сюрприз.
- Зображення, як щодо позиційований елемент, залежить від батьків, які повинні визначити, де його розташувати.
- У
Традиційно, спробуємо вирішити цю проблему установкою лейаута.
Результат виглядає тепер так.
- Ваше зображення тепер там, де і повинно бути (лейаут верхнього рівня встановив правильне положення плаваючого елементу і зображення).
має тепер небажані побічні ефекти:
- Синя рамка більше не схлопивается, як повинна, лейаут тепер охоплює зображення і плаваючий елемент.
- Будь-який текст, оточуючий плаваючий елемент буде блоковим.
- Витрати продуктивності цього сценарію невеликі, але якщо на сторінку помістити їх 50. ви отримаєте точку.
У цьому сценарії не так багато, що ви могли б зробити (крім, можливо, видалення непотрібних position. Relative). Ми не намагаємося перешкоджати використанню hasLayout для обходу багів IE6, але просто намагаємося пояснити, як вирішити проблеми. В ідеалі, всі ці проблеми повинні бути вирішені, якщо не в IE7, то в майбутніх версіях.
Я спробував пояснити деяку частину внутрішньої роботи і побічні ефекти hasLayout. Я перерахував, які елементи мають вбудований лейаут і коли нормальні елементи можуть отримати його. Нарешті, я обговорив наслідки включення лейаута і навів приклади того, що відбувається з елементами.
В ідеалі, користувач не повинен знати про цю функцію, оскільки вона в основному використовується всередині IE для реалізації CSS-позиціювання. Однак, вона показала себе як "ліки" для деяких багів IE. Ця фіча не стикалися зі специфікацією CSS, оскільки вона призначена для внутрішнього використання для реалізації специфікації (правда з помилками). Маючи це на увазі, я хотів би пролити світло на наслідки лейаута.
Подяки
Я хотів би подякувати Web Standards Group (WaSP) за їх підтримку і зворотний зв'язок за цією статтею. Зокрема, я хотів би подякувати Діна Едвардса і Кріса Вілсона за їх рецензію. Дякую Холлі Бергевіна, Інго Чао, Бруно Фассіно, Джона Галланта, Георга Сортуна і Філіпа Уіттенберга за докладне обговорення статті. Вона призначена для розширення зусилля співтовариства щодо додаткової інформації та пояснення загадки "hasLayout". Дякуємо всім учасникам.