Internet Explorer 10 ignora el ancho y el alto en las imágenes

Question

Tengo un sitio web en el que Internet Explorer 10 ignora por completo los atributos explícitamente establecidos de ancho y alto a favor del tamaño real de la imagen.

La imagen se define como:

<img style="float: left; margin: 0px 10px 0px 0px; display: inline;" 
    align="left" src="http://blog.hinshelwood.com/files/2012/09/metro-findings.png" 
    width="64" 
    height="64"/> 

Pero se representa como 128x128 en IE10. En Chrome, es justo lo que cabría esperar.

E.g. http://blog.hinshelwood.com/tfs-integration-tools-issue-tfs-wit-invalid-submission-conflict-type/

En esta página las imágenes "Se aplica a", "Solución" y "Hallazgos" están todas configuradas en 64x64 pero en IE10 se muestran como 128x128. He intentado configurar el siguiente CSS, pero esto también se ignora:

h3 img { 
width: 64px; 
height: 64px; 
} 

¿Alguien tiene alguna idea de por qué?

Answer 1

Usted tiene

body .content img { 
    max-width: 100%; 
    height: auto; 
    width: auto \9; 
} 

http://blog.hinshelwood.com/wp-content/themes/pagelines/pagelines-compiled-css-2_1348178943/

En IE, el inválido width: auto \9; se interpreta como width: auto;

En Chrome, el ancho inválido es ignorado.

Sin la auto anchura, el comportamiento de la imagen es diferente:

En Chrome, la anchura es ahora deriva de h3 IMG { width: 64px; }, y puesto que la altura es de auto, la imagen se escala de acuerdo con 64px.

En IE, tanto el ancho como la altura siguen siendo "automáticos" y, por lo tanto, toma los tamaños de IMG predeterminados.

estilos CSS tienen prioridad sobre los atributos de etiqueta IMG: puede probar a usar un estilo en línea para anular estilos heredados.

<img style="height: 64px; width: 64px;" src="..." />