html - used - w3schools web page size

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

Question

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

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 procesa como 128x128 en IE10. En Chrome es como esperabas.

Por ejemplo, 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 "Resultados" 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

Tienes

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 width: auto /9; inválido width: auto /9; Se interpreta como width: auto;

En Chrome, el ancho no válido se ignora.

Sin el ancho automático, el comportamiento de la imagen es diferente:

En Chrome, el ancho ahora se deriva de h3 IMG { width: 64px; } h3 IMG { width: 64px; } , y como la altura es automática, la imagen se escala según 64px.

En IE, tanto el ancho como el alto siguen siendo "automáticos" y, por lo tanto, adquiere los tamaños IMG predeterminados.

Los estilos CSS anulan los atributos de la etiqueta IMG : puede intentar usar el estilo en línea para anular los estilos heredados.

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