Error de Internet Explorer 8 con pantalla: tabla

Tengo el error más extraño de todos los tiempos ... estoy experimentando con display: table, y mi prueba de concepto funciona en el primer intento después de abrir un nuevo proceso, pero cualquier recarga posterior de la página rompe el diseño. Aquí está la página HTML simple:Error de Internet Explorer 8 con pantalla: tabla

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Untitled Page</title> 
    <style> 
     .container { 
      display: table; 
     } 

     .row { 
      display: table-row; 
     } 

     .cell { 
      display: table-cell; 
      width: 100px; 
      height: 100px; 
      border: 1px solid blue; 
      padding: 1em; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="cell">CELL A</div> 
      <div class="cell">CELL B</div> 
      <div class="cell">CELL C</div> 
     </div> 
    </div> 
</body> 
</html>

Y aquí está el resultado esperado, esto es lo que me pasa después de cargar la primera vez.

alt text

Ahora que es lo que consigo después de volver a cargar la página, con F5:

alt text

Es una locura !!!

¿Alguien puede intentarlo y decirme cómo sale para ellos? Gracias. Espero que no me haya matado antes de leer la solución :-)

Fuente

2010-09-21 md1337

me da buenos resultados en Vista. – Brandon

@ md1337: considere que IE8 ha estado fuera por un tiempo. ¿Por qué eres la primera persona en ver este error? –

Funciona bien para mí. (WindowsXP, 8.0.6001.18702) –

Resulta que, como lo sugirieron algunos, el modo de compatibilidad de IE se desencadenó de alguna manera.

Descubrí que es porque estoy ejecutando la página en una Intranet y, por defecto, el modo de compatibilidad está habilitado para los sitios web de Intranet.

Esto puede inhabilitarse yendo a Herramientas> Configuración de vista de compatibilidad y desmarcando los sitios de Intranet de visualización en el cuadro Vista de compatibilidad. Por supuesto, esto no es algo que necesariamente se desea hacer todas sus usuarios a hacer, por lo que me fue sugerido añadir

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

en la cabecera, que funciona muy bien.

Más información sobre eso: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

Fuente

2010-09-21 22:36:29 md1337

gracias ... esto ayudó mucho –

El problema cuando el navegador está en la vista de compatibilidad. (según lo sugerido por taylorjes)

Cuando la página se muestra en la vista normal, las celdas son horizontales. Cuando se muestra en la vista de compatibilidad, las celdas son verticales.

Como dije en mi comentario, desalentaría mucho la propiedad de CSS de la pantalla (table/table-row/table-cell). No está bien soportado y está obligado a tener peculiaridades.

Honestamente si lo que está mostrando son datos tabulares, luego use una tabla. Las tablas son solo malvadas cuando se usan para el diseño .

Fuente

2010-09-21 21:45:59 riwalk

@ md1337 - No es así. Usted escribe su código para que sea compatible con varios navegadores (por lo tanto, mis comentarios desalientan el uso de esas propiedades de CSS). – riwalk

@ md1337. Ah, y antes de que pienses lo contrario, el voto negativo no fue mío. Es una pregunta legítima, incluso si la respuesta no es la que quería;) – riwalk

'alert (document.documentMode)' le dirá '8' o' 7' (o '5' para el modo peculiar). Utilice '' para forzar que IE use el "mejor" modo de estándares que tiene disponible. De lo contrario, puede ser víctima del modo de compatibilidad si el usuario lo solicita, incumple de forma predeterminada o hace clic accidentalmente, o si Microsoft lo coloca en la lista de compatibilidad. – bobince

Error de Internet Explorer 8 con pantalla: tabla

Respuesta

Cuestiones relacionadas