¿Cómo hago que funcione el modo estándar y el modo peculiar?

StackOverflow https://stackoverflow.com/questions/416094

Pregunta

El siguiente HTML me funciona muy bien 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 han dicho que la ausencia de un DocType en la parte superior de dicho HTML está causando que ambos navegadores funcionen en " Quirks " modo.

Me han dicho que esto es malo.

He probado varios DocTypes pero no he encontrado una combinación DocType / HTML que produzca una representación correcta en ambos navegadores.

Cualquier otra cosa que no sea "Quirks" El modo hace que los navegadores reaccionen de manera diferente al intento de establecer el ancho de un cuadro de texto. Esto parece llevar a una posición en la que puedo corregir mis instrucciones para FF o IE y de repente la otra fallará.

Algunos detalles ...

1. > El objetivo aquí es que las 3 filas deben tener el mismo ancho exactamente cuando se representan en cada navegador. No es necesario que los anchos representados sean los mismos en todos los navegadores, simplemente que aparecen correctamente justificados / iluminados 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 consistente 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.

¿Qué debo hacer? ¿Cómo especificar un DocType (y tal vez alterar mi html) que creará una apariencia consistente en los navegadores?

¿Fue útil?

Solución

La principal diferencia entre "Quirks" y " Cumplimiento de normas " el modo es un " modelo de caja " " lo que da como resultado diferentes formas de calcular tamaños en función de la configuración de ancho / alto, relleno, margen y borde. En el modo Cumplimiento estándar, el ancho y la altura efectivos de un cuadro se calculan agregando todos estos parámetros (busque en la web para obtener más detalles).

Entonces, como especifica un borde de 1 px, sus primeros campos de entrada tendrán un ancho de 302 píxeles (300 píxeles + 2 * 1 píxeles para el borde izquierdo y derecho). La inconsistencia entre FF e IE que mencionó puede ser causada por diferentes valores predeterminados. para el " relleno " ajuste. 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. Solo use un margen derecho de '' 3px '' para los campos de entrada para la brecha. 

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 haz los cálculos para determinar el " ancho " configuraciones para que la suma de todos los anchos (incluido el relleno, el borde y el margen) en cada fila sean iguales, por ejemplo: 

300px + 5px = 305px
145px + 150px + 2*5px = 305px
90px + 100px + 100px + 3*5px = 305px

Observe que " 5px " consiste en el margen derecho 3px y 2 veces el borde (1px).

Ahí tienes. Si desea utilizar un relleno diferente para una mejor apariencia, ¡simplemente inclúyalo en sus cálculos!

Otros consejos

Este es un excelente artículo para obtener su DOCTYPE correcto:
http://www.alistapart.com/stories/doctype/

Dado que su problema se debió principalmente a diferentes valores predeterminados en IE y Firefox, es posible que le interese un Restablecer CSS hoja de estilo, que incluye valores para elementos como el relleno, eliminando los valores predeterminados de cada navegador para que todos se muestren de manera similar.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top