IE6 图像长宽比、CSS
上有以下代码
所以我的 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>
应该为 1140px x 392px 的图像显示为 1140px x 1303px
宽度似乎是正确的,但高度正在扭曲。
你知道修复方法吗?
我知道 IE6 即将被淘汰,但对于世界上一些使用率超过 28% 的国家和企业来说,在某些情况下支持它仍然很重要。
So i have the following code on my img's
width:100%; height: auto;
However IE6 being infamous for conforming to web-standards seems to ignore the aspect ratio, it adds a default aspect ratio onto the image and makes them look hidious, it stretches them and squashes them in some instances it loads them correctly but it's not consistent.
The html looks like this
<div 100% width of window>
<div 100% with some margin>
<img that looks great in IE (yeah right..) />
</div>
</div>
An image that is supposed to be 1140px by 392px is displayed at 1140px by 1303px
Width seems to be correct but the height is getting distorted.
Do you know of a fix?
I understand that IE6 is on the way-out but with some countries in the world with over 28% of usage and corporations it is still important to support it in some instances.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
上面的代码并不是告诉图像本身是 100%,而是容器宽度的 100%。如果这就是你想要的,那就好吧。否则,通过拉伸,听起来 IE 只是在做它被告知的事情,尽管它似乎对如何处理
height:auto
感到困惑...保留图像的纵横比或保持其原始像素高度,同时拉伸其宽度。那么您是否尝试过完全忽略
height
?它在其他浏览器中的行为似乎是相同的,也许它会消除 IE 6 的混乱......你想在这里实现什么?
编辑:
也许您需要为 IE 6 维护一个条件样式表。所有其他浏览器都会忽略这一点。
Your code above is not telling the image to be 100% of itself, but rather 100% of it's container's width. If that's what you want, then fine. Otherwise, by stretching, it sounds like IE is just doing what it's told albeit that it seems to be confused about what to do with
height:auto
... preserve the image's aspect ratio or keep it's original pixel height while stretching its width.So have you tried leaving out
height
entirely? It seems to behave the same in other browsers, perhaps it will eliminate IE 6's confusion...What are you trying to achieve here?
EDIT:
Perhaps you'll need to maintain a conditional stylesheet just for IE 6. All other browsers will ignore this.