Internet Explorer 10 игнорирует ширину и высоту изображений

У меня есть веб-сайт, на котором Internet Explorer 10 полностью игнорирует явно заданные атрибуты ширины и высоты в пользу фактического размера изображения.

Изображение определяется как:

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

Но он отображается как 128x128 в IE10. В Chrome это точно так же, как вы ожидали.

например. http://blog.hinshelwood.com/tfs-integration-tools-issue-tfs-wit-invalid-submission-conflict-type/

На этой странице изображения "Применяется к", "Решение" и "Выводы" настроены на 64x64, но в IE10 они отображаются как 128x128. Я попытался установить следующий CSS, но это тоже игнорируется:

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

Есть ли у кого-нибудь идеи, почему?

Ответ 1

У вас есть

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

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

В IE недопустимый width: auto \9; интерпретируется как width: auto;

В Chrome недопустимая ширина игнорируется.

Без автоматической ширины поведение изображения отличается:

В Chrome ширина теперь выводится из h3 IMG { width: 64px; }, а так как высота является автоматической, изображение масштабируется в соответствии с 64px.

В IE ширина и высота по-прежнему остаются "авто", и, следовательно, он принимает размеры IMG по умолчанию.

стили CSS переопределяют атрибуты тегов IMG: вы можете попробовать использовать встроенный стиль для переопределения унаследованных стилей.

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