en línea-bloque: Firefox 4 vs IE 9

Estoy confundido por qué IE9 interpreta un comportamiento tan básico de una manera sorprendente. En Firefox 4 o Chrome 11 veo que los divs aparecen uno al lado del otro como era de esperar. Sin embargo, en IE9, veo los divs que aparecen uno debajo del otro.en línea-bloque: Firefox 4 vs IE 9

<div style='border: black solid 1px'> 
    <div style='display: inline-block; width: 10em; height: 1em; background-color: red'> 
     block one 
    </div> 
    <div style='display: inline-block; width: 10em; height: 1em; background-color: green'> 
     block two 
    </div> 
</div>

Estoy seguro de IE9 compatible con las normas, así que lo que me estoy perdiendo?

¡Cualquier ayuda sería apreciada!

ACTUALIZACIÓN: Wow, esto es extraño. No tuve ninguna declaración DOCTYPE antes. En el momento en que agrego <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> en la parte superior de la página, IE9 funciona bien, al igual que Firefox y Chrome. ¿Alguna idea de lo que estaba pasando antes?

Fuente

2011-03-30 Alexandre

¿Qué tan ancha es su contenedor 'div'? – alex

puede ser que tenga este http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie – sandeep

Para este ejemplo, siempre y cuando el div superior sea mayor que 20em, puede ver esto extraña inconsistencia. – Alexandre

La única cosa que puedo pensar es que IE9 está utilizando Vista de compatibilidad (similar al motor de renderizado de Internet Explorer 7 si no estoy equivocado) para hacer que su página . Si desactivas la Vista de compatibilidad, verás que las cajas se acumulan horizontalmente como se esperaba.

Solo IE8 y versiones posteriores tienen soporte completo para display: inline-block. IE7 y anteriores lo aplican a elementos que están en línea por defecto (como span) y no a otros elementos (como li o div). Como resultado, los elementos del bloque se muestran como bloques, no como bloques en línea.

ACTUALIZACIÓN: Wow, esto es extraño. No tuve ninguna declaración DOCTYPE antes. En el momento en que agrego <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> en la parte superior de la página, IE9 funciona bien, al igual que Firefox y Chrome. ¿Alguna idea de lo que estaba pasando antes?

Eso es fácil: antes de agregar su declaración de doctype, IE9 se estaba procesando en quirks mode. En el modo peculiar, IE trata display: inline-block como lo hizo en versiones anteriores, como explico en el párrafo anterior. Al tener una declaración de tipo de documento, IE9 se procesará en modo estándar, representando sus estilos como se esperaba.

Fuente

2011-03-30 07:45:19 BoltClock

intente lo siguiente funciona ...

<div style='border: black solid 1px;display:inline'> 
    <div style='display: inline; width: 10em; height: 1em; background-color: red'> 
     block one 
    </div> 
    <div style='display: inline; width: 10em; height: 1em; background-color: green'> 
     block two 
    </div> 
</div>

Fuente

2011-03-30 06:41:25 Jitesh

Gracias por su ayuda. Sin embargo, mi pregunta estaba más relacionada con el bloque en línea. No podía entender por qué IE9 elegiría colocar los divisores internos uno debajo del otro.Pensé que el efecto central de * inline * -block era que los bloques se colocarían uno al lado del otro sin una nueva línea. – Alexandre

Sí, hay algunos problemas con IE 9 y muestra: inline-block. Se puede evitar con Lebel de compatibilidad como explican BoltClock. Mi consejo es utilizar float: left lugar de display: inline-block

<div style='border: black solid 1px'> 
     <div style='float:left; width: 10em; height: 1em; background-color: red'> 
      block one 
     </div> 
     <div style='float:left; width: 10em; height: 1em; background-color: green'> 
      block two 
     </div> 
    </div>

Puede encontrar más información sobre Div side by side in one line.

Fuente

2012-10-17 13:56:27 Markweb

para que funcione sin DOCTYPE (añadiendo que no está en mi control) que tenía que utilizar el siguiente CSS

<style type="text/css"> 
     #myulid li{ 
      display: inline-block; 
      width: 100px; 
      margin: 10; 
      text-align:center; 
      vertical-align: top; 
     } 
    </style> 

    <!--[if IE]> 
    <style type="text/css"> 
     /* css for IE */ 
     #myulid{ 
      display: block; 
     } 
     #myulid li{ 
      display: inline; 
     } 
    </style> 
    <![endif]-->

Fuente

2013-04-26 23:02:54 sreek

en línea-bloque: Firefox 4 vs IE 9

Respuesta

Cuestiones relacionadas