Hay muchos beneficios al usar el marco XHTML + CSS, pero de hecho hay algunos problemas, ya sea por inexperiencia o por ideas poco claras, primero escribiré algunos de los problemas que encontré a continuación para evitar que todos busquen.
1. La interpretación del modelo BOX en Mozilla Firefox e IE es inconsistente, lo que resulta en una diferencia de 2 píxeles. Solución:
div{margin:30px!important;margin:28px;}
Tenga en cuenta que el orden de estos dos márgenes no debe escribirse al revés. Según Ajie, IE no reconoce el atributo importante, pero otros navegadores sí. Por lo tanto, en realidad se interpreta así en IE:
sidiv{maring:30px;margin:28px}
se define repetidamente, se ejecutará el último, por lo que no se puede simplemente escribir margin:XXpx!important
2. La interpretación de BOX de; IE5 e IE6 son inconsistentes bajo IE5. div{width:300px;margin:0 10px 0 10px;}El ancho del div se interpretará como 300px-10px (relleno derecho)-10px (relleno izquierdo). div es 280px, mientras que el ancho en IE6 y otros navegadores se calcula como 300px + 10px (relleno derecho) + 10px (relleno izquierdo) = 320px. En este momento podemos hacer las siguientes modificaciones:
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
No entiendo muy bien qué es esto /**/, solo lo sé IE5 y Firefox Ambos son compatibles, pero IE6 no lo admite. Si alguien lo entiende, hágamelo saber. :)
3. La etiqueta ul tiene un valor de relleno de forma predeterminada en Mozilla, pero en IE solo el margen tiene un valor, por lo que definirlo primero:
ul{margin:0;padding:0;}
puede resolver la mayoría de los problemas.
4. Con respecto a los scripts, el atributo de idioma no es compatible con xhtml1.1. Solo necesita cambiar el código a:
Eso es todo.
5. Si configura las direcciones de float y text-align en el contenedor BOX para que sean las mismas:
{float:left;text-align:left;margin:0 0 0 200px;}
podemos hacer las siguientes modificaciones:
{float :izquierda; alineación de texto:izquierda;margen:0 0 0 200px;pantalla:en línea;}