在 IE8 中查看时图像被压扁答案

【问题标题】：Images Being Squashed When Viewed In IE8在 IE8 中查看时图像被压扁
【发布时间】：2012-02-28 18:10:32
【问题描述】：

我正在开发一个新网站http://blgz.co/，但由于某种奇怪的原因，我所有的图片都被压缩了！！！！！！我花了最后几个小时试图解决这个问题，但无济于事。任何帮助都会很棒！谢谢。

【问题讨论】：

标签： javascript css drupal internet-explorer-8 image

【解决方案1】：

无法弄清楚为什么要将最大宽度声明添加到全局 img 标记中。删除它，您的所有图像都会正常流动：

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

【讨论】：

它也是 Bootstrap 2 的一部分，他们将其固定在 3 上 :)

【解决方案2】：

这是因为你max-width: 100%风格，你申请img标签。在您的情况下，它只有 23px，这是因为它的父 .node .field-name-field-op-main-image 具有 float: left，这意味着它将充当内联元素（但不会考虑您图像的宽度，或者您可能稍后设置图像宽度）。换句话说，删除float:left 或max-width:100%，你会得到“想要的”结果

【讨论】：

【解决方案3】：

我参加这个聚会迟到了，但我自己也遇到了这个问题，简单地删除 max-width 或不浮动父元素不是选项。结果，我只好找到一个真正的解决方案：只需添加width:auto;，例如：

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

具有讽刺意味的是，这在所有浏览器中都运行得非常好但 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/');

【讨论】：

我认为条件注释必须没有！...

【解决方案4】：

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

修复：添加 min-width: 46px; 会强制 IE8 呈现正确的宽度，而不会破坏其他浏览器。

【讨论】：