在IE8中查看时被挤压的图像

Images Being Squashed When Viewed In IE8

本文关键字：图像 IE8      更新时间：2023-09-26

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

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

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

这是因为您的max-width: 100%样式，您正在应用于img标记。在您的情况下，它只有23px，这是因为它的父.node .field-name-field-op-main-image具有float: left，这意味着它将充当内联元素（但不会考虑图像的宽度，或者可能您稍后设置了图像宽度）。换句话说，删除float:left或max-width:100%，您将获得"所需"结果

我来晚了，但我自己刚刚遇到了这个问题，简单地删除max-width或不浮动父元素都不是选项。因此，我不得不找到一个真正的解决方案：只需添加width:auto;，例如：

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

具有讽刺意味的是，这在每个浏览器中都非常有效，但Chrome 20，然后它开始像IE8一样运行。所以我求助于CSS破解，只针对IE8：

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

现在，在所有人都吓坏之前，我选择了一个CSS破解，因为我正在对Bootstrap CSS Framework的重置进行这个特殊的更改，它已经在其他地方使用了破解。如果你想走白帽路线，那么你可以简单地在HTML中添加一个条件注释：

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

还有一点需要注意，如果你在*.less文件中使用上面的破解，你必须对其进行转义，否则less编译器会被它卡住：

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

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

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

相关文章：