在IE8中查看图片时，图片会被压缩

Question

我正在制作一个新网站，http://blgz.co/，但是出现了奇怪的问题——所有图片都变形啦！我已经尝试了几个小时，但是仍然无法解决。希望得到帮助！谢谢。

- George Milonas

Answer 1

无法理解您为什么要将max-width声明添加到全局的img标签中。移除该声明后，所有图片都将正常流动：

img {
    height: auto;
    max-width: 100%; /* remove */
}

- Andres Ilich

---

这也是 Bootstrap 2 的一部分，但在 3 版本中已经修复了 :) - miguelmpn

Answer 2

这是因为你将max-width: 100%样式应用于img标记。在你的情况下，它只有23px，这是因为其父元素.node .field-name-field-op-main-image具有float: left，这意味着它将充当内联元素（但不会考虑图像宽度或可能稍后设置图像宽度）。

换句话说，删除float:left或max-width:100%中的任何一个，即可获得“期望”的结果。

- Pavel Podlipensky

Answer 3

我有些晚来参加这个聚会，但我也遇到了这个问题，只是删除 max-width 或者不浮动父元素都不是选项。因此，我不得不找到一个真正的解决方案：只需要添加 width:auto;，例如：

img {
    height: auto;
    width: auto;
    max-width: 100%;
}

具有讽刺意味的是，在除了Chrome 20之外的所有浏览器中都运行良好，而Chrome 20开始表现得像IE8一样。因此，我采用了一个CSS hack来仅针对IE8：

img {
    height: auto;
    width: auto\0/;
    max-width: 100%;
}

在所有人惊慌之前，我选择了一种CSS hack，因为我正在对Bootstrap CSS框架的重置进行此特定更改，该框架已经在其他地方使用了hack。如果您想采用白帽子方法，那么可以在HTML中简单地添加条件注释：

<!--[if !IE 8]>
    <style type="text/css">
        img { width: auto; }
    </style>
<![endif]-->

还有一点需要注意，如果您在*.less文件中使用上述hack，您需要对其进行转义，否则LESS编译器将无法处理它:

width: e('auto\0/');

- Chris Pratt

---

我认为条件注释必须没有!... <!--[if IE 8]> <style type="text/css"> img { width: auto; } </style> <![endif]--> - Volker

Answer 4

在我的情况下，由于某种原因，IE8不想遵守显式的width: 46px; CSS。

解决方法：添加min-width: 46px;可以强制IE8渲染正确的宽度，而不会破坏其他浏览器。

- Jonathan Lin