Html Internet Explorer 10 忽略图像的宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12521716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Internet Explorer 10 ignores width & height on images
提问by MrHinsh - Martin Hinshelwood
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.
我有一个网站，其中 Internet Explorer 10 完全忽略显式设置的宽度和高度属性，以支持实际图像大小。
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.
但它在 IE10 中呈现为 128x128。在 Chrome 中，正如您所期望的那样。
E.g. http://blog.hinshelwood.com/tfs-integration-tools-issue-tfs-wit-invalid-submission-conflict-type/
例如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:
在此页面上，“适用于”、“解决方案”和“发现”图像都设置为 64x64，但在 IE10 中它们显示为 128x128。我尝试设置以下 CSS，但这也被忽略：
h3 img {
width: 64px;
height: 64px;
}
Does anyone have any ideas why?
有谁知道为什么？
回答by John Liu
You have
你有
body .content img {
max-width: 100%;
height: auto;
width: auto ;
}
http://blog.hinshelwood.com/wp-content/themes/pagelines/pagelines-compiled-css-2_1348178943/
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;
在 IE 中，无效width: auto \9;被解释为width: auto;
In Chrome, the invalid width is ignored.
在 Chrome 中，无效的宽度被忽略。
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.
在 Chrome 中，宽度现在来自h3 IMG { width: 64px; }，并且由于高度是自动的，图像根据 64px 缩放。
In IE, both width and height are still "auto", and thus it takes on the default IMG sizes.
在 IE 中，宽度和高度仍然是“自动”，因此它采用默认的 IMG 尺寸。
CSS styles overrides IMG tag attributes: you can try using inline styling to override inherited styles.
CSS 样式覆盖 IMG 标签属性：您可以尝试使用内联样式覆盖继承的样式。
<img style="height: 64px; width: 64px;" src="..." />
