В идеальном мире нам не нужно ничего знать о свойстве hasLayout Однако его эффект имеет далеко идущие последствия и имеет серьезные последствия для внешнего вида и поведения элементов, влияя на то, как элемент ограничивает свое содержимое и реагирует со своими соседями.
Эта тема касается исключительно Internet Explorer для Windows.
Что такое свойство hasLayout?
В Internet Explorer элемент либо отвечает за определение размера и упорядочение своего собственного содержимого, либо полагается на родительский элемент для определения размера и упорядочения своего содержимого.
Чтобы учесть эти две разные концепции, механизм рендеринга использует свойство hasLayout Мы говорим, что элемент получает макет или имеет макет, когда свойство hasLayout
Когда элемент имеет макет, он отвечает за определение размера и позиционирование себя и, возможно, любых дочерних элементов. Проще говоря, это означает, что элемент больше заботится о себе и своем содержимом, а не полагается на элемент-предок для выполнения всей работы. Поэтому некоторые элементы будут иметь макет по умолчанию, а большинство — нет.
Элементы, отвечающие за организацию собственного содержимого, будут иметь макет по умолчанию и включать следующее (этот список не является исчерпывающим):
- тело и HTML (в стандартном режиме)
- стол, тр, й, тд
- IMG
- час
- ввод, кнопка, файл, выбор, текстовая область, набор полей
- шатер
- frameset, frame, iframe
- объекты, апплеты, вставка
Основными причинами, по которым Microsoft приводит тот факт, что не все элементы имеют макет по умолчанию, являются «производительность и простота». Если бы все элементы имели макет по умолчанию, это может отрицательно сказаться на производительности и использовании памяти.
Так почему любой из нас должен заботиться о свойстве hasLayout Потому что многие Internet Explorer отображают несоответствия, которые можно отнести к этому свойству.
В большинстве случаев проблемы, вызванные элементами, которые не имеют макета, легко обнаружить: контент часто теряется или полностью отсутствует. Например, когда элемент, такой как div, который по умолчанию не имеет макета, содержит плавающий или абсолютно позиционированный контент, он часто будет демонстрировать странное и ошибочное поведение. Типы странного поведения, которое может возникать, различны и включают в себя такие поведения, как отсутствующий или неуместный контент, или элементы, которые не могут полностью перерисоваться при перемещении или прокрутке окна.
Если вы заметили, что часть вашего контента появляется и исчезает, а разделы страницы лишь наполовину прорисованы, это хороший признак того, что элемент требует макета. Когда ключевой элемент получает макет, проблема чудесным образом исчезает. Фактически, 99% ошибок CSS в Internet Explorer, с которыми вы сталкиваетесь ежедневно, можно исправить с помощью исправления hasLayout в правильном месте. Исправление hasLayout
Простейший способ получить макет для элемента — применить к нему свойство CSS, например, widthheight Однако в ситуациях, когда вы не хотите применять определенную ширину или высоту к элементу, есть несколько других свойств CSS, которые, когда вы применяете их к элементу, заставят этот элемент получить макет.
Эти другие свойства:
- дисплей: встроенный блок
- высота: (любое значение, кроме авто)
- плавать: (влево или вправо)
- положение: абсолют
- ширина: (любое значение кроме авто)
- режим письма: tb-rl
- увеличение: (любое значение, кроме нормального)
Internet Explorer 7 имеет некоторые дополнительные свойства, которые заставляют элемент получить макет (это не исчерпывающий список):
- минимальная высота: (любое значение)
- максимальная высота: (любое значение, кроме ни одного)
- минимальная ширина: (любое значение)
- максимальная ширина: (любое значение, кроме ни одного)
- переполнение: (любое значение, кроме видимого)
- overflow-x: (любое значение, кроме видимого)
- overflow-y: (любое значение, кроме видимого) 5
- положение: фиксированное
Объявление любого из этих свойств CSS приведет к тому, что элемент получит макет — конечно, при условии, что свойство действительно для соответствующего элемента. Например, мы не можем применить высоту к встроенным элементам, если документ не запущен в режиме причуд .
Не стоит придавать всем элементам макет — не только из-за уже упомянутых проблем с производительностью и памятью, но и из-за ряда других нежелательных побочных эффектов CSS. Например:
Дочерние элементы с абсолютно позиционированными или плавающими элементами не будут сокращаться, чтобы обернуть их содержимое, когда у дочернего элемента есть макет.
Статическое содержимое, расположенное рядом с поплавком, не будет обтекать поплавок, а вместо этого будет образовывать прямоугольный блок сбоку от поплавка.
Дополнительные примеры нежелательного поведения описаны на веб-сайте MSDN .
Отладка hasLayout Проблемы
Если вы замечаете, что ваша веб-страница ведет себя странно в Internet Explorer, попробуйте установить свойство CSS для элемента, чтобы он приобрел макет, и посмотрите, исчезает ли проблема.
Некоторый навык связан с определением правильного элемента, к которому должно применяться свойство. С опытом можно легко идентифицировать виновника — обычно это будет родительский контейнер, для которого не установлена явная ширина, или ширина которого определяется только полями. Если этот родительский элемент содержит плавающие или абсолютные элементы, скорее всего, он является причиной проблемы; проблемы, вероятно, существуют, потому что он не заботится о своих дочерних элементах.
Полезный подход к устранению неполадок макета состоит в том, чтобы установить собственное масштабируемое свойство CSS на 1 для элементов в документе, по одному, чтобы изолировать элемент, вызывающий проблему. Если вы установили свойство для элемента, и проблема была решена, вы знаете, что находитесь на правильном пути. Свойство zoom полезно, потому что, будучи не только свойством, которое запускает элемент для получения макета, в большинстве случаев его установка не изменит внешний вид страницы каким-либо другим способом (кроме возможного исправления ошибки, которую вы ‘ переживаю). Процесс устранения может использоваться, чтобы сузить проблему довольно быстро.
Как только вы нашли элемент, который вызывает проблему, вы можете применить необходимое исправление. Предпочтительным подходом является установка одного или нескольких размерных свойств CSS для элемента. Однако, если размеры не могут быть применены в обычном режиме, необходимо использовать обходной путь.
Для Internet Explorer 7 лучший подход — установить для свойства min-height значение 0; эта техника безвредна, так как 0 в любом случае является начальным значением свойства. Нет необходимости скрывать свойство от других браузеров — что, безусловно, не относится к нашему следующему предложению!
Стандартный подход для запуска элемента для получения макета в Internet Explorer 6 и более ранних версиях состоит в том, чтобы установить для свойства height значение 1%, если для свойства overflow не установлено ничего, кроме visible. Этот подход использует ошибку в этих версиях браузера, из-за которой, если для свойства переполнения установлено значение по умолчанию visible, высота содержащего блока будет расширяться, чтобы соответствовать его содержимому независимо от значения свойства height. Однако большинство других браузеров будут учитывать значение высоты, равное 1%, что обычно не соответствует тому, что вы от них хотите, поэтому это объявление необходимо будет скрыть от всех других браузеров.
В предыдущие годы методика установки высоты на 1% и скрытия декларации от всех браузеров, кроме Internet Explorer 6 и более ранних версий, была известна как хакерство Холли . В настоящее время рекомендуемый метод указания объявлений CSS только для Internet Explorer заключается в использовании условных комментариев.
Хорошая новость заключается в том, что Internet Explorer 7 намного более устойчив, чем предыдущие версии, и многие (хотя не все, к сожалению) проблемы, связанные с компоновкой, исчезли — вам потребуется гораздо меньше исправлений, чем в предыдущих версиях браузер. Для получения дополнительной информации о проблеме макета см. « Наличие макета » на веб-сайте Satzansatz.