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 y tiene algunas propiedades muy especiales. Resumimoslo como referencia:
IE6 Modo estándar:◎ No importa qué altura y ancho estén establecidos, su tamaño siempre llena 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 especial 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 más simple en la dirección y, similar a la comprensión de IE6 de la altura del elemento normal: 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: si el ancho de <html> son todos valores que no sean valores no 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 llenará 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 visualización: en línea (extrañamente, el flotador 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 the 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 a strange 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 2nd point in the Primer caso: un espacio de contenido lleno de <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á extrañamente la referencia porcentual de <body> (o el bloque de contenido de <body>).
En la dirección y, si la altura de <html> es el valor predeterminado automático, entonces la altura de <body> se ignorará si toma un valor porcentual. 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 margen+borde+alturas de relleno de la altura del área de visión menos <html>.
En la dirección X, si el ancho toma el valor predeterminado automático, y el ancho porcentual de <body> no se ignorará, pero su referencia de cálculo sigue siendo tan extraña como la dirección y, restando la suma de margen+borde+anchos de relleno 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 extraño.
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 ... No es fácil decir que amarte ...
IE5 y modos de peculiaridades◎ <html> y <body> Todas las configuraciones de ancho y altura se ignoran y permanecen llenas de ventanas gráficas.
◎ <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.