在IE8中被压缩的图像

我在一个新的网站上工作，http://blgz.co/，出于某种奇怪的原因，我所有的图像都被挤压了!!!!!。我花了几个小时试图解决问题无济于事。任何帮助将是伟大的！谢谢。在IE8中被压缩的图像

2012-02-28 George Milonas

想不通为什么你要添加的最大宽度声明全局img标签。删除和所有的图像通常会流向：

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

来源

2012-02-28 18:22:29

它是“基础”主题的一部分....谢谢！ – 2012-02-28 22:46:15

它也是Bootstrap 2的一部分，它们固定在3 :) – miguelmpn 2015-08-05 14:52:20

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

来源

2012-02-28 18:21:17

，我迟到了这个派对，但我只是碰到了这个问题我自己，而简单地删除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破解，因为我做的引导CSS框架的复位，它已经在使用黑客这个特殊的变化其他地方。如果你想要去的白帽子的路线，那么你可以简单的添加条件注释你的HTML：

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

还要说明一点，如果你使用上面的黑客在* .LESS文件，要逃避它或LESS编译器会呛它：

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

来源

2012-07-03 15:58:56

我认为有条件的评论必须没有！... <！ - [if IE 8]> – Volker 2013-10-16 12:01:11

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

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

来源

2012-11-08 04:20:22

在IE8中被压缩的图像

回答

相关问题