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

gauge jquery (12)

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.

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:

Si configuro "display: block", ¿el botón debe tener un ancho del 100%? ¿O es esto indefinido?
Como la pantalla es bloqueada, debería "margin: 0 auto;" centrar el botón, o no, o indefinido?

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.
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.

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.

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

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

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.

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!

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.

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

Sí, puede leer las especificaciones cien veces y combinar diferentes partes y piezas hasta que tenga una interpretación que le parezca correcta, pero eso es exactamente lo que hicieron los proveedores de navegadores y es por eso que estamos en la situación en que nos encontramos hoy.

En esencia, cuando aplica un ancho del 100% a un elemento, debe extenderse al 100% del ancho de sus padres, si ese elemento principal es un elemento de bloque. Ya no puedes centrarlo con margin: 0 auto; luego ya que ocupa el 100% del ancho disponible.

Para centrar cualquier cosa con margin: 0 auto; necesita definir un ancho explícito. Para centrar un elemento en línea, puede usar text-align: center; en el elemento primario, aunque esto podría tener efectos secundarios no deseados si el padre tiene otros hijos.

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>

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>