html - que - problemas css internet explorer
¿Cómo hago que el modo Estándares funcione tan bien como el modo peculiar? (3)
El siguiente Html funciona muy bien para mí en Firefox o IE7 / 8 (con o sin la etiqueta de estilo)
<!-- Deliberately no DocType to induce Quirks Mode -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
Input.quirks
{
margin: 1px 0px 1px 0px;
border: solid black 1px;
}
</style>
</head>
<body>
Should work in Quirks Mode <br />
<input class="quirks" type="text" style="width: 300px;" /><br />
<input class="quirks" type="text" style="width: 147px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" maxlength="25" style="width: 150px;" /><br />
<input class="quirks" type="text" style="width: 94px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" style="width: 100px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" value="DA8 1DE" style="width: 100px;" />
</body>
</html>
Sin embargo, me informan que la ausencia de un DocType en la parte superior de dicho código HTML hace que ambos navegadores funcionen en el modo "Quirks".
Me dijeron que esto es malo.
He intentado varios tipos de documentos pero no he encontrado una combinación de DocType / HTML que proporcione una representación correcta en ambos navegadores.
Cualquier cosa que no sea el modo "Quirks" hace que los navegadores reaccionen de manera diferente al intento de establecer el ancho de un cuadro de texto. Esto parece conducir a una posición donde puedo corregir mis instrucciones para FF o IE y de repente el otro fallará.
Algunos detalles ...
1.> El objetivo aquí es que las 3 filas parezcan tener el mismo ancho exactamente cuando se representan en cada navegador. No es extraño que los anchos renderizados sean los mismos en todos los navegadores, simplemente que aparezcan correctamente justificados / atenuados dentro de cada navegador.
2.> La imagen a la que se hace referencia es una imagen espaciadora de 3 píxeles de ancho y 1 de alto (una alternativa a esto también sería buena)
3.> No quiero introducir tablas si es posible.
Parece que el modo Quirks es el único modo que es coherente en todos los navegadores. Sin embargo, me preocupa que la versión final de IE8 o, de hecho, en algún navegador futuro, el modo peculiar no sea el predeterminado.
Que debería hacer ? ¿Cómo especifico un DocType (y quizás modifique mi html) que creará una apariencia consistente en todos los navegadores?
Dado que su problema fue causado principalmente por diferentes valores predeterminados en IE y Firefox, puede interesarle una hoja de estilo Reset CSS , que incluye valores para cosas como relleno, borrando de manera efectiva los valores predeterminados para cada navegador para que todos se procesen de manera similar.
Este es un excelente artículo sobre cómo obtener su DOCTYPE correcto:
http://www.alistapart.com/stories/doctype/
La diferencia principal entre el modo "Quirks" y "Cumplimiento de normas" es un "modelo de caja" diferente que da como resultado diferentes formas de calcular los tamaños en función de la anchura / altura, el relleno, el margen y la configuración del borde. En el modo de cumplimiento estándar, el ancho y alto efectivos de un cuadro se calcula sumando todos estos parámetros (busque en la web para obtener más detalles).
Entonces, dado que especifica un borde 1px, sus primeros campos de entrada serán 302px de ancho (300px + 2 * 1px para el borde izquierdo y derecho). La incoherencia entre FF e IE que mencionó puede deberse a diferentes "valores predeterminados" para la configuración de "relleno". Acabo de probar su código con un DOCTYPE y sin relleno para los campos de entrada; ambos navegadores lo procesaron de la misma manera.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ahora, para las imágenes espaciadoras: No las use. No los necesitas. Simplemente use un margen derecho de "3px" para los campos de entrada para el espacio.
input.quirks {
margin: 1px 3px 1px 0px; /* 3px right margin */
border: solid black 1px;
padding: 0px; /* so that IE and FF use the same padding */
}
Luego haga los cálculos para determinar los ajustes correctos de "ancho" de modo que la suma de todos los anchos (incluido el relleno, borde y margen!) En cada fila sea igual, por ejemplo:
300px + 5px = 305px
145px + 150px + 2*5px = 305px
90px + 100px + 100px + 3*5px = 305px
Observe que "5px" consiste en 3px-right-margin y 2 veces el borde (1px).
Ahí tienes. Si desea utilizar un relleno diferente para una apariencia más agradable, simplemente inclúyalo en sus cálculos.