Internet Explorer 8 hace caso omiso de la anchura de 'display: table-cell' elemento

According to quirks mode, Internet Explorer 8 hace opciones de mesa de apoyo para la propiedad de presentación, pero en este ejemplo se muestra un comportamiento muy extraño
http://jsfiddle.net/e3cUn/3/Internet Explorer 8 hace caso omiso de la anchura de 'display: table-cell' elemento

En un navegador normal, , la imagen interna se escalará para ajustarse a la caja de 150x150 sin cambiar la relación de dimensión (estiramiento).

alt text

Pero en IE8, la caja exterior (azul) también se estirará:
alt text

1) ¿Ha visto algo así? Parece estar relacionado con text-align:center: eliminar esta propiedad soluciona el problema, pero sí necesito centrar la imagen (en navegadores que no sean, por ejemplo, al menos).

2) Si esto no se puede corregir correctamente, ¿cómo puedo proporcionar un valor especial display para IE? He visto algunos ejemplos en la web, como #display: block;, pero todos funcionan solo con IE7.

Sé acerca de <!--[if IE 8]> y comandos similares para poner en html, pero en realidad estaba buscando una manera de hacerlo en el archivo css. Algo como esto

display: table-cell; 
    #display: block;

Segunda línea no es un comentario, anula el valor anterior para ie7 y siguientes. (pero no ie8)

¡Gracias!

Fuente

2011-01-05 Nikita Rybak

+1, acaba de golpear el mismo error horrendo! –

También puede orientar IE8 con 'display: block \ 9;'. – Tower

Después de añadir el Bounty, terminé trabajando en torno a este problema al dirigir mi CSS a IE8. Yo ya estaba usando Paul Irish's technique of adding classes to the <html> element usando los comentarios condicionales:

<!--[if lt IE 7 ]> <html class="ie6 ielt9"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie7 ielt9"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie8 ielt9"> <![endif]--> 
<!--[if IE 9 ]> <html class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

Así que todo lo que tenía que hacer es añadir una regla CSS extra para IE 8 e inferior:

.img-container { display: table-cell; } /* IE9+ and other browsers */ 
.ielt9 .img-container { display: block; } /* IE8 and lower */

Junto con el techniques for vertically centring images, esto me da una buena solución de navegador cruzado.

Fuente

2011-10-12 08:52:30

¡Buen truco con estilos condicionales! Como todas las cosas increíbles, parece simple en retrospectiva. –

¿Tiene una etiqueta doctype?

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

Tuve el mismo problema una vez con IE, eso resolvió el problema.

Buena suerte

Fuente

2011-01-05 19:22:45 Sebastjan

Cambié 'estricto' a 'transitorio', sigue siendo el mismo. Bueno, gracias por intentarlo! –

Si text-align: center no está funcionando, se puede probar el siguiente, en vez (a menos que tenga alguna razón que el uso de la disposición de la tabla es necesario). Este es generalmente el método preferido para centrar cualquier elemento de disposición de bloques. Uso del Centro de text-align es punto de retorno cuando sea necesario, pero menos fiable en mi experiencia - no se puede utilizar para divs anidados, etc.
```
img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 
```
Si necesita hacer una anulación de la medida para el IE, el lo más sencillo es utilizar una hoja de estilo externa, y el suministro de lo siguiente en su sección <head>:
```
 
```
de suministro de estilo que por debajo de la ordinaria, y debe anularlo. Si lo hace, siempre puede recurrir al suministro de etiquetas !important al final de las instrucciones que necesita anular (aunque siempre es preferible evitar eso a menos que sea absolutamente necesario, ya que confunde la herencia de elementos secundarios, y debe recordarlo constantemente).)Por ejemplo:
```
.root img { 
    text-align: left !important; 
    ... 
} 
```

Fuente

2011-01-05 19:29:59

1) 'display: table-cell' es la única forma decente que conozco para centrar la imagen verticalmente. Y si lo elimino, el centrado horizontal ya no es un problema. –

2) Sé que, en realidad, estaba buscando una forma de proporcionar valores específicos de IE archivo _inside_ css. No quiero crear hojas de estilos separadas para esto (aunque lo haré, si esa es la única opción). ¿Sabes algo así? –

1) Noté en una breve prueba que puede usar tanto 'display: table-cell' para el elemento container como' margin' auto' truick en el elemento img. Entonces, probablemente podrías soltar el 'text-align: center' del elemento' .root' y, en su lugar, darle un estilo al 'img' directamente. 2) El único hack interno de IE CSS que he visto con cierta fiabilidad (aunque no me gusta) está usando '*', que * creo * todavía funciona a partir de IE8. Tampoco observo el alargamiento que está informando en IE7, lo cual es extraño dado que IE8 es incorrecto. –

Uso width en lugar de max-width porque en ie8 se tomará la anchura real de la imagen para la tabla. Compruebe esto Fiddle.

Reorganizar CSS:

.root img { 
    width: 130px; 
    max-height: 130px; 
}

Actualizado

CSS:

.root span { 
    width:130px; 
    overflow:hidden; 
    display:inline-block; 
} 
.root img { 
    max-width: 130px; 
    max-height: 130px; 
}

HTML:

<div class="root"> 
    <span><img src=http://www.google.com/intl/en_com/images/srpr/logo1w.png /></span> 
</div>

Fuente

2011-10-12 04:44:19 Sanooj

Es una solución a medio camino, pero eso no mantendrá la relación de aspecto de la imagen cuando la altura de la imagen sea mayor que su ancho, ¿verdad? –

ok, he actualizado el http://jsfiddle.net/e3cUn/61/, pero deberá usar span fuera de la imagen. Por favor, compruebe la respuesta anterior su gran solución actualizada – Sanooj

, +1. Como ya tenía como objetivo CSS para IE 7 e IE 6, decidí modificar mi código para dirigir el mismo CSS a IE 8, lo que me solucionó el problema. De lo contrario, definitivamente me habría ido por esto. –

parece ayudar si el contenedor primario de un elemento display:table-cell tiene un atributo display:table (y una table-layout:fixed), ver this example y this related question.

Fuente

2013-03-27 11:52:06 0x4a6f4672

El 'table-layout: fixed' parece arreglarlo por mí. Gracias. –

Internet Explorer 8 hace caso omiso de la anchura de 'display: table-cell' elemento

Respuesta

Cuestiones relacionadas