max-width en <img> etiqueta que no funciona en IE8

Question

Tengo un problema extraño. En un sitio que se estaba construyendo actualmente, tenemos una función de galería a través del plugin jQuery, Gallerific. La galería se abre en una ventana modal. Lo que necesito es establecer un ancho máximo de las imágenes a 765px. Por lo tanto, he establecido el ancho máximo: 765px; en mi CSS Sé que no estoy trabajando en IE6 pero no me importa.

Lo extraño es que cuando uso una imagen de p. Ej. 1400 px de ancho, IE8 en la vista de compatibilidad, Firefox, Chrome, Safari y Opera, todos los escalas esta imagen hasta 765px en el ancho, pero no IE8! No puedo entender por qué esto no funciona.

¿Alguien tiene una pista sobre lo que está pasando, o cómo aún mejor, cómo solucionarlo?

Le agradecemos sus respuestas - ¡Gracias!

Saludos, Kim

Answer 1

Tal Gallerific aplica un ancho máximo de la marcha? ¿Has intentado con !important?

Answer 2

Te has topado con "Almost Standards Mode" de IE8 (que está diseñado para romperse de la misma manera que IE7). Adición de una etiqueta meta:

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

o un campo de encabezado HTTP reales con los mismos valores debe poner en modo estándar adecuado. Tenga en cuenta que la metaetiqueta debe aparecer antes de cualquier guión o elementos de estilo para que funcione correctamente.

Answer 3

IE8 requiere que se coloque un contenedor alrededor de la imagen, con su ancho ya sea ajustado al ancho máximo que está buscando, o al ancho del 100% (parece funcionar mejor en divs absolutamente posicionados). IE8 parece estar contento siempre que se defina un ancho en ese contenedor.

Para su ejemplo, puede establecer el div contenedor a la anchura máxima que está buscando, al establecer la propiedad de ancho máximo de todas las imágenes al 100%:

.container { width: 765px;} 
img { max-width: 100%;} 

que obliga a las imágenes que se van no más que el ancho del contenedor en el que se encuentran.

Asegúrese de declarar un doctype HTML5; IE no le gusta los tipos de letra XHTML.

Saludos cordiales, Larry

Answer 4

me encontré con un problema similar, la solución contenedor no funcionará si no se dispone de imágenes de diferentes tamaños, si la imagen es pequeña que dejaría una gran cantidad de espacio en el lado de la imagen. Aparentemente, la altura máxima funciona bien en IE8, recomendaría usar eso si puedes.

Answer 5

Como se explicó en otras respuestas, debe aplicar un ancho a un contenedor para resolver este problema en IE8. Para una solución específica Galleriffic, puede agregar CSS similar a esto:

a.thumb img 
{ 
    max-width: 160px; 
} 

/* IE 8 specific bug */ 
a.thumb 
{ 
    width: 160px; 
} 

Answer 6

Oye una cosa que puede que desee probar (que me hizo golpearse la cabeza contra una pared), así que asegurarse de que su tipo de documento es puesta a punto correctamente.

IE8 funciona con la versión HTML5, pero si está en minúsculas no lo hace.

http://www.kintek.com.au/blog/ie8-max-width-max-height-and-inline-ie8-css-hacks/

También hay interesantes hacks CSS en línea que usted puede hacer lo que se dirigirá a plataformas específicas:

ancho: 200px \ 9;/* ie8 y anterior / altura: 200px \ 9;/ ie8 y anterior */

Answer 7

Encontré algo similar con IE 8 y 9 y encontré que tenía un problema diferente en mi código que vale la pena mencionar.

Tenía un div con un ancho del 100%, luego un div que tenía un ancho máximo de 980px.

Por alguna razón, no se veía el ancho máximo, y un elemento dentro de ese 980 div que se suponía que flotaba a la derecha no lo era.

Corrí la página a través del validador de código w3 y captó un comentario que estaba antes de la declaración del doctype y dijo que IE estaría en modo "peculiaridades".

Tan pronto como me moví que se alaban a continuación la declaración DOCTYPE advertencia modo de 'caprichos' del validador se fue y todo funcionaba bien en IE 8 y 9.