El elemento <html>, el elemento raíz en el documento XHTML, es muy familiar. Sin embargo, he estado tratando de hacer un diseño recientemente y descubrí que en IE, no es un papel tan simple, con algunas "naturalezas" extraordinarias. Resumimoslo como referencia:
IE6 Modo estándar:◎ No importa qué altura y ancho estén establecidos, su tamaño siempre cubre toda el área de observación.
◎ No importa qué tipo de relleno y borde estén establecidos para él, el tamaño y el tamaño siempre llenan toda el área de observación.
◎ El margen será ignorado.
◎ El bloque de contención inicial es el ancho del borde del rectángulo del área de la vista menos <html>
Usando CSS3 para expresarlo, podemos considerar <html> en IE6 como un elemento extraordinario de altura: 100%; Ancho: 100%; dimensionamiento de la caja: border-box; y estos atributos son inmutables.
IE7 Modo estándar:Aunque IE7 ha solucionado varios errores CSS en IE6, la comprensión de <html> es mucho más complicada que IE6. Aunque IE6 es extraño, hay pocos atributos que se pueden cambiar, por lo que sigue siendo simple. El <html> de IE7 puede aceptar más atributos, pero el algoritmo no sigue las especificaciones y es honesto, por lo que es mucho más problemático resolverlo que IE6.
La primera es la función de expansión automática.
El elemento <html> es simple en la dirección y, y es similar a la comprensión de IE6 de la altura del elemento ordinario: si la altura de contenido excede la altura de <html>, o si <html> no tiene una altura fija (es decir, el valor predeterminado automático), entonces <html> expandirá automáticamente su propia altura para incluir el contenido.
Pero en la dirección X, el problema se centra principalmente en la comprensión del ancho de <body>. Aquí hay dos situaciones: (¿no dijo <html>? ¿Por qué habló sobre el ancho de <body>? Porque si <html> quiere expandirse automáticamente, debe saber cuán ancho es el <body>).
El primer caso: ancho de <html> Si es un valor que no sea un valor que no sea un valor que no sea 0 (incluido el valor predeterminado automático), entonces el ancho de <body> está determinado por las siguientes reglas:
1. Si el ancho de <body> es un valor fijo, entonces hay tanto ancho.
2. Si el ancho de <body> es el valor predeterminado automático, el ancho cubrirá el espacio de contenido de <html>.
3. Si <body> mismo tiene características encogidas y circundantes, como la posición de configuración: Absoluta o pantalla: en línea (la cosa extraña es flotante pero no satisface este elemento, satisface 2), entonces depende del ancho del contenido.
The second case: If the width of <html> is 0, then the 1st and 3rd points are the same as above, and the 2nd point, if the width of <body> is the default value auto, the width will adapt to the content, but there is an amazing phenomenon, that is, if <body> has a border or padding that is not 0 at the same time, its width will not adapt to the content and will become the second point in the first case - the El espacio de contenido de <html> está cubierto con <html>. Dado que el ancho de <html> es 0 en este momento, el ancho de <body> también colapsa a 0.
En segundo lugar, la configuración de ancho y altura de <html> afectará sorprendentemente la referencia porcentual de <body> (o <body> 's contiene bloque).
En la dirección y, si la altura de <html> es el valor predeterminado automático, entonces si la altura de <body> toma un valor porcentual, se ignorará. Pero una vez que el valor de altura de <html> tiene una altura específica, incluso si es 0, se aplicará la altura porcentual de <body>. Pero lo extraño es que la referencia de cálculo para este porcentaje de altura no es la altura del <html> que solo se establece, sino la suma de las alturas de acolchado de margen de la altura del área de la vista menos el <html>.
En la dirección x, si el ancho toma el valor predeterminado automático, y la dirección y es diferente, el ancho porcentual de <fody> no se ignorará, pero su referencia de cálculo aún es tan extraña como la dirección y, restando la suma del ancho de acolchado de margen de margen de <html> para el ancho de la visión. Si el ancho tiene un valor específico, se reemplazará como una referencia de ancho porcentual para <Body>.
Nuevamente, cuando <body> esté configurado en posición: absoluto, el color de borde de <html> no será válido. Este es otro error increíble.
Finalmente, el bloque de contenido inicial adopta un rectángulo de la ventana gráfica, que es básicamente normal. Pero es imposible crear un bloque que contenga con elementos absolutamente posicionados. Pero tal vez el bloque de contenido creado por <html> es el rectángulo de la ventana gráfica, quién sabe.
Es tan desordenado. No es solo una cabeza grande, sino también una gran cabeza después de solucionarla. No sé si puedes verlo claramente después de mirar hacia atrás en el futuro. IE7 ah ie7 ... quiero decir que te amo mucho ...
IE5 y modos de peculiaridades◎ <html> y <body> Todas las configuraciones de ancho y altura se ignoran y permanecen llenas de áreas de visualización.
◎ <html> El relleno y el margen no son aceptados.
◎ <body> Acepte el acolchado y el margen, pero el margen negativo no tiene ningún efecto visual, pero se introducirá al calcular otros parámetros correspondientes.
El borde, el fondo y otros atributos se transferirán hacia arriba al elemento <html>.
◎ Bloque inicial que contiene el borde del relleno de <cody>.
utilidadEste resumen se deriva del problema de diseño al principio. El problema de diseño es uno de sus usos. Reescribiré una publicación para resolverlo más tarde. Pero ese diseño solo usa algunas características, y debería haber más potencial para tocar, así que estudíelo lentamente.