Элемент <html>, корневой элемент в документе XHTML, очень знаком. Тем не менее, я недавно пытался сделать макет и обнаружил, что в IE это не такая простая роль и обладает некоторыми очень особыми свойствами. Давайте обобщу это для справки:
Стандартный режим IE6:◎ Независимо от того, какая высота и ширина установлены для него, его размер всегда заполняет всю область просмотра.
◎ Независимо от того, какие заполнения и границы для него установлены, размер и размер всегда заполняют всю область просмотра.
◎ Маржа будет игнорирована.
◎ Начальный содержимый блок - это ширина границы прямоугольника площади вида минус <html>
Используя CSS3 для его выражения, мы можем рассматривать <html> в IE6 как специальный элемент высоты: 100%; Ширина: 100%; Распределение коробки: пограничная коробка; И эти атрибуты неизменны.
Стандартный режим IE7:Хотя IE7 исправил несколько ошибок CSS в IE6, понимание <html> намного сложнее, чем IE6. Хотя IE6 странный, есть несколько атрибутов, которые можно изменить, поэтому он все еще прост. IE7's <Tml> может принять больше атрибутов, но алгоритм не следует по спецификациям и является честным, поэтому выяснить его гораздо более хлопотно, чем IE6.
Первый - это функция автоматического расширения.
Элемент <html> проще в направлении Y, аналогично пониманию IE6 нормальной высоты элемента - если высота содержания превышает высоту <html>, или если <html> не имеет фиксированной высоты (т.е.
Но в направлении X проблема в основном фокусируется на понимании ширины <body>. Вот две ситуации: (разве это не говорилось <html>? Почему вы говорили о ширине <body>? Потому что, если <html> хочет автоматически расширить, вы должны знать, насколько широкий <Body> для расширения.)
Первый случай: если ширина <html> является всеми значениями, отличными от значений без 0 (включая автоматическое значение значения по умолчанию), то ширина <body> определяется следующими правилами:
1. Если ширина <body> является фиксированным значением, то ширина так много.
2. Если ширина <body> является автоматическим значением по умолчанию, ширина заполнит пространство содержимого <html>.
3. Если <body> само по себе имеет сокращающиеся и окружающие характеристики, такие как установка позиции: абсолютное или отображение: встроенный (как ни странно, Float не удовлетворяет этому элементу, он удовлетворяет 2), то это зависит от ширины содержания.
Второй случай: если ширина <html> равен 0, то 1 -е и 3 -е точки такая же, как и выше, а 2 -я точка, если ширина <body> - это значение значения по умолчанию, ширина адаптируется к содержанию, но есть странное явление, то есть, если <body> имеет границу или накладки, не в той же точке. - Контент -пространство, полное <html>. Поскольку ширина <html> составляет 0 в настоящее время, ширина <body> также падает до 0.
Во -вторых, настройки ширины и высоты <html> будут странно повлиять на процентную ссылку <body> (или содержащий блок <body>).
В направлении y, если высота <html> является автоматическим значением по умолчанию, то высота <body> будет игнорироваться, если оно потребуется процентное значение. Но как только значение высоты <html> имеет определенную высоту, даже если она составляет 0, будет применяться процентная высота <тела>. Но что странно, так это то, что ссылка на расчет для этой высоты процента не является высотой <html> просто установленной, а сумма края+граница+высота прокладки на высоте площади просмотра минус <html>.
В направлении x, если ширина принимает значение по умолчанию, и ширина процента <body> не будет игнорирована, но его ссылка на расчет по -прежнему столь же странно, как направление y, вычитая сумму маржи+границы+ширина прокладки <html> для ширины просмотра. Если ширина имеет определенное значение, она будет заменена в виде процентной ширины для <body>.
Опять же, когда <body> устанавливается на положение: абсолютно, пограничный цвет <html> будет недействительным. Это еще одна странная ошибка.
Наконец, первоначальный, содержащий блок, принимает прямоугольник Viewport, который в основном нормальный. Но невозможно создать содержащий блок с абсолютно расположенными элементами. Но, возможно, содержащий блок, созданный <html>, - это прямоугольник Viewport, который знает.
Это так грязно. Это не только большая голова, но и большая голова после того, как разобралась. Я не знаю, сможете ли вы ясно видеть это после оглядывания в будущем. IE7 AH IE7 ... нелегко сказать, что любить тебя ...
IE5 и режимы Quirks◎ <html> и <body> Все настройки ширины и высоты игнорируются и остаются полными.
◎ <html> прокладки и маржа не принимаются.
◎ <Body> принимайте заполнение и маржу, но отрицательный край не имеет визуального эффекта, но будет принесен при расчете других соответствующих параметров.
◎ <Body> граница, фон и другие атрибуты будут переданы вверх в элемент <html>.
◎ Начальный содержимый блок - это края прокладки <корпуса>.
полезностьЭто резюме получено из задачи макета в начале. Проблема макета является одним из его применений. Я переписываю пост, чтобы разобраться позже. Но этот макет использует только несколько функций, и должно быть больше потенциала, поэтому изучайте его медленно.