web-dev-qa-db-fra.com

Internet Explorer 10 ignore la largeur et la hauteur des images

J'ai un site Web dans lequel Internet Explorer 10 ignore complètement les attributs explicitement définis de largeur et de hauteur en faveur de la taille réelle de l'image.

L'image est définie comme:

<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"/>

Mais il est rendu en 128x128 dans IE10. Dans Chrome, c'est exactement ce que vous attendez.

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

Sur cette page, les images "S'applique à", "Solution" et "Résultats" sont toutes définies sur 64x64 mais dans IE10 elles s'affichent en 128x128. J'ai essayé de définir le CSS suivant, mais cela aussi est ignoré:

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

Quelqu'un at-il des idées pourquoi?

htmlcssimageinternet-explorer-10
24
MrHinsh - Martin Hinshelwood

Vous avez

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

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

Dans IE, le width: auto \9; Non valide est interprété comme width: auto;

Dans Chrome, la largeur non valide est ignorée.

Sans la largeur auto, le comportement de l'image est différent:

Dans Chrome, la largeur est désormais dérivée de h3 IMG { width: 64px; }, Et comme la hauteur est automatique, l'image est mise à l'échelle selon 64 pixels.

Dans IE, la largeur et la hauteur sont toujours "auto" et prennent donc les tailles IMG par défaut.

Les styles CSS remplacent les attributs des balises IMG : vous pouvez essayer d'utiliser le style en ligne pour remplacer les styles hérités.

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