24

我有一个网站，其中 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"/>

但它在 IE10 中呈现为 128x128。在 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;
}

有谁知道为什么？

4

1 回答 1

45

你有

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 中，invalidwidth: auto \9;被解释为width: auto;

在 Chrome 中，无效的宽度会被忽略。

没有宽度自动，图像的行为是不同的：

在 Chrome 中，宽度现在来自h3 IMG { width: 64px; }，并且由于高度是自动的，因此图像会根据 64 像素进行缩放。

在 IE 中，宽度和高度仍然是“自动”的，因此它采用默认的 IMG 大小。

CSS 样式覆盖 IMG 标签属性：您可以尝试使用内联样式来覆盖继承的样式。

<img style="height: 64px; width: 64px;" src="..." />
于 2012-09-21T00:33:09.190 回答