html meter - Uso de "margin:0 auto;" en Internet Explorer 8




gauge jquery (11)

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?


Answers

Agregue <!doctype html> en la parte superior de su salida de HTML.


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


Es un error en IE8.

Comenzando con su segunda pregunta: "margin: 0 auto" centra un bloque, pero solo cuando el ancho del bloque se establece para que sea menor que el ancho del elemento primario. Por lo general, llegan a ser lo mismo. Es por eso que el texto en el siguiente ejemplo no está centrado.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <b style="display: block; margin: 0 auto; ">text</b>
</div>

Una vez que el estilo de visualización del elemento b se establece en bloque, su ancho predeterminado es el ancho de los padres. Especificación de CSS 10.3.3 Elementos de nivel de bloque no reemplazados en flujo normal describe cómo: "Si 'ancho' se establece en 'automático', cualquier otro valor 'automático' se convierte en '0' y se sigue 'ancho' en la igualdad resultante . "La igualdad mencionada allí es

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = ancho del bloque contenedor

Por lo tanto, normalmente todos los autos dan como resultado que el ancho de un bloque sea igual al ancho del bloque contenedor.

Sin embargo, este cálculo no se debe aplicar a INPUT, que es un elemento reemplazado. Los elementos reemplazados están cubiertos por 10.3.4 Elementos reemplazados a nivel de bloque en flujo normal . El texto allí dice: "El valor utilizado de 'ancho' se determina como para elementos reemplazados en línea." La parte relevante de 10.3.2 Elementos en línea, reemplazados es: "si 'ancho' tiene un valor calculado de 'automático', y el el elemento tiene un ancho intrínseco, entonces ese ancho intrínseco es el valor utilizado de 'ancho' ".

Supongo que el escenario que le importa a CSS es el elemento IMG. El logotipo de en este ejemplo estará centrado en todos los navegadores.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <img style="display: block; margin: 0 auto; " border="0" src="http://.com/content/img/so/logo.png" alt="">
</div>

El elemento INPUT debe comportarse de la misma manera.


  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.


Una vez más: ¡todos odiamos a IE!

<div style="width:100%;background-color:blue;">
    <div style="margin:0 auto;width:300px;background-color:red;">
        Not Working
    </div>
</div>

<div style="width:100%;background-color:green;text-align:center;">
    <div style="margin:0 auto;width:300px;background-color:orange;text-align:left;">
        Working, but dumb that you have to use text-align
    </div>
</div>

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.


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;" />

Como explica buti-oxa, esto es un error con la forma en que IE8 maneja los elementos reemplazados. Si no desea agregar un ancho explícito a su botón, puede cambiarlo a un bloque en línea y alinear los contenidos al centro:

<div style="height: 500px; width: 500px; background-color: Yellow; text-align: center;">
  <input type="submit" style="display: inline-block;" />
</div>

Si desea que esto funcione en versiones anteriores de Mozilla (incluido FF2) que no admiten el bloque en línea, puede agregar display: -moz-inline-stack; al botón.


"margin: 0 auto" solo centra un elemento en IE si el elemento padre tiene un "text-align: center".


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>

Puede realizar la transición desde altura: 0 a altura: automático siempre que también proporcione min-height y max-height.

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}




html css internet-explorer-8