[html] Uso de "margin: 0 auto;" en Internet Explorer 8


5 Answers

Al agregar <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> resuelve el problema

Question

Estoy en el proceso de hacer algunas pruebas avanzadas de IE8, y parece que la vieja técnica de usar margin: 0 auto; no funciona en todos los casos en IE8.

La siguiente pieza de HTML da un botón centrado en FF3, Opera, Safari, Chrome, IE7 e IE8 compat, pero NO en el estándar IE8:

<div style="height: 500px; width: 500px; background-color: Yellow;">
    <input type="submit" style="display: block; margin: 0 auto;" />
</div>

(Como solución alternativa, puedo agregar un ancho explícito al botón).

Entonces la pregunta es: ¿qué navegadores son correctos? ¿O es este uno de esos casos donde el comportamiento no está definido?

(Mi opinión es que todos los navegadores son incorrectos, ¿no debería el botón tener un ancho del 100% si es "display: block"?)

ACTUALIZACIÓN: estoy siendo un tonto. Como la entrada no es un elemento de nivel de bloque, debería haberlo contenido dentro de un div con "text-align: center". Habiendo dicho eso, por curiosidad, todavía me gustaría saber si el botón debe o no centrarse en el ejemplo anterior.

PARA EL MALTRATO: Sé que estoy haciendo cosas raras en el ejemplo, y como señalo en la actualización, debería haber alineado el centro. Para la recompensa, me gustaría referencias a las especificaciones que responden:

  1. Si configuro "display: block", ¿el botón debe tener un ancho del 100%? ¿O es esto indefinido?

  2. Como la pantalla es bloqueada, debería "margin: 0 auto;" centrar el botón, o no, o indefinido?




Los controles de formulario son elementos reemplazados en CSS.

10.3.4 Nivel de bloque, elementos reemplazados en flujo normal

El valor utilizado de 'ancho' se determina como para elementos reemplazados en línea . A continuación, se aplican las reglas para los elementos de nivel de bloque no reemplazados para determinar los márgenes.

Por lo tanto, el control de forma no debe estirarse al 100% de ancho.

Sin embargo, should estar centrado. Parece un error común en IE8. Centra el elemento si configura ancho específico:

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />



intenté todo lo anterior, terminé haciendo esto

<div style="width:100%; background-color:red; text-align:center;">
        <div style="width:900px; margin:0 auto; background-color:blue;">
            hello
        </div>
    </div>



En la medida en que esto es un "error" con relación a la especificación; no lo es Como autor de las preguntas de la publicación, el comportamiento para esto sería "indefinido" ya que este comportamiento en IE solo ocurre en los controles de formulario, según la especificación:

CSS 2.1 no define qué propiedades se aplican a los controles de formulario y marcos, o cómo se puede usar CSS para darles estilo. Los agentes de usuario pueden aplicar propiedades CSS a estos elementos. Se recomienda a los autores tratar este soporte como experimental.

( http://www.w3.org/TR/CSS21/conform.html#conformance )

¡Aclamaciones!




no debería el botón tener un ancho del 100% si es "pantalla: bloque"

No. Eso solo significa que es la única cosa en el espacio verticalmente (suponiendo que no estés usando otro truco para forzar a otra parte también). No significa que tiene que llenar el ancho de ese espacio.

Creo que su problema en este caso es que la input no es nativamente un elemento de bloque. Intente anidar dentro de otro div y establezca el margen en eso. Pero no tengo un navegador IE8 para probar esto en este momento, así que es solo una suposición.




  1. Asumiendo margin: 0 auto entonces el elemento debe estar centrado, pero el ancho se deja tal como está, sea lo que sea que se haya calculado, sin tener en cuenta las configuraciones de margen.
  2. Si configura la etiqueta <INPUT> para display:block , entonces debe centrarse con margin: 0 auto .

Consulte Detalles del modelo de formato visual: cálculo de los anchos y los márgenes de las especificaciones de CSS 2.1 para obtener más detalles. Los bits de Relavent incluyen:

En un contexto de formato de bloque, el borde externo izquierdo de cada cuadro toca el borde izquierdo del bloque que lo contiene.

y

Cuando el ancho total de los cuadros en línea en una línea es menor que el ancho del cuadro de línea que los contiene, su distribución horizontal dentro del cuadro de línea está determinada por la propiedad 'texto-alineación'.

finalmente

Si 'ancho' se establece en 'automático', cualquier otro valor 'automático' se convierte en '0' y 'ancho' se sigue de la igualdad resultante.

Si ambos 'margin-left' y 'margin-right' son 'auto', sus valores utilizados son iguales. Esto centra horizontalmente el elemento con respecto a los bordes del bloque contenedor.




Related