IE6 Img纵横比,CSS

时间:2011-11-01 14:08:24

标签: css internet-explorer-6

所以我在img的

上有以下代码

width:100%; height: auto;

然而IE6因为符合网络标准而臭名昭着似乎忽略了宽高比,它在图像上添加了默认的宽高比并使它们看起来很隐蔽,它会拉伸它们并在某些情况下压扁它们正确地加载它们但它是不一致。

html看起来像这样

<div 100% width of window>
     <div 100% with some margin>
          <img that looks great in IE (yeah right..) />
     </div>
</div>

应该是1140像素x 392像素的图像显示在 1140像素×1303像素

宽度似乎是正确的,但高度变得扭曲。

你知道修复吗?

据我所知,IE6正处于出路状态,但在世界上一些国家/地区拥有超过28%的使用率和公司,在某些情况下支持它仍然很重要。

1 个答案:

答案 0 :(得分:1)

#yourImgage {
    width:100%; height: auto;
}
  

它拉伸它们并在某些情况下压扁它们加载它们   正确但但并不一致。

上面的代码并不是说图像是100%本身,而是100%的容器宽度。如果这就是你想要的,那很好。否则,通过拉伸,听起来IE就像它所说的那样,虽然似乎对如何处理height:auto感到困惑...保持图像的纵横比或保持其原始像素高度同时拉伸其宽度

所以你试过完全遗漏height吗?它似乎在其他浏览器中表现相同,也许它会消除IE 6的混乱......

#yourImgage {
    width:100%;
}

你想在这里实现什么目标?


修改

也许你需要maintain a conditional stylesheet just for IE 6。所有其他浏览器都会忽略这一点。

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-only.css" />       
<![endif]-->