Internet Explorer 10 ignores width & height on images

Question

I have a website in which Internet Explorer 10 is completely ignoring the explicitly set width and height attributes in favour of the actual image size.

The image is defined as:

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

But it is rendered as 128x128 in IE10. In Chrome it is just as you would expect.

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

On this page the "Applies To", "Solution" and "Findings" images are all set to 64x64 but in IE10 they display as 128x128. I have tried setting the following CSS, but this too is ignored:

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

Does anyone have any ideas why?

Answer 1

You have

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

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

In IE, the invalid width: auto \9; is interpreted as width: auto;

In Chrome, the invalid width is ignored.

Without the width auto, the behaviour of the image is different:

In Chrome, the width is now derived from h3 IMG { width: 64px; }, and since the height is auto, the image is scaled according to 64px.

In IE, both width and height are still "auto", and thus it takes on the default IMG sizes.

CSS styles overrides IMG tag attributes: you can try using inline styling to override inherited styles.

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