html - Internet Explorer 8 ignora el ancho del elemento ''display: table-cell''

css internet-explorer (5)

De acuerdo con el modo peculiar , internet explorer 8 admite opciones de tabla para propiedades de visualización, pero en este ejemplo muestra un comportamiento muy extraño.
http://jsfiddle.net/e3cUn/3/

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

Pero en IE8, el cuadro exterior (azul) también se estirará:

1) ¿Has visto algo así? Parece estar relacionado con text-align:center : eliminar esta propiedad soluciona el problema, pero necesito centrar la imagen (al menos en los navegadores, es decir, en los navegadores).

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

edit . Sé que se trata de <!--[if IE 8]> y comandos similares para poner en html, pero en realidad estaba buscando una forma de hacerlo en un archivo css. Algo como esto

display: table-cell; #display: block;

La segunda línea no es un comentario, anula el valor anterior para ie7 y por debajo. (pero no ie8)

¡Gracias!

Si text-align: center no funciona, puede intentar lo siguiente, en su lugar (a menos que tenga alguna razón por la que sea necesario usar el diseño de la tabla). Este es generalmente el método preferido para centrar cualquier elemento de diseño de bloque. Usar el centro de alineación de texto es una alternativa cuando es necesario, pero menos confiable en mi experiencia, no se puede usar para divs anidados, etc.
img { display: block; margin-left: auto; margin-right: auto; }
Si necesita realizar una anulación personalizada para IE, la forma más sencilla es usar una hoja de estilo externa y proporcionar lo siguiente en su sección <head> :

Suministre esa hoja de estilo por debajo de la normal, y debería anularla. Si lo hace, siempre puede recurrir al suministro de etiquetas !important al final de las declaraciones que debe anular (aunque siempre es preferible evitar eso a menos que sea absolutamente necesario, ya que confunde la herencia de los elementos secundarios y debe recordarlos constantemente). eso). Por ejemplo:
.root img { text-align: left !important; ... }

¿Tienes 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 un mismo problema una vez con IE, que solucionó el problema.

Buena suerte

Después de agregar la recompensa, terminé resolviendo este problema dirigiendo mi CSS a IE8. Ya estaba usando la técnica de Paul Irish de agregar clases al elemento <html> usando comentarios condicionales:

     <html class=""> 

Así que todo lo que tenía que hacer es agregar una regla de CSS adicional para IE 8 e inferior:

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

Junto con las técnicas para centrar verticalmente las imágenes , esto me da una buena solución para todos los navegadores.

Parece ser útil si el contenedor primario de un elemento de display:table-cell tiene un atributo de display:table (y un table-layout:fixed ), vea este ejemplo y esta pregunta relacionada .

Use width lugar de width max-width porque en ie8 se tomará el ancho real de la imagen para la tabla. Compruebe este 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>