高度:Internet Explorer 8 及更低版本中的自动 [英] Height: Auto in Internet Explorer 8 and below
问题描述
转向响应式设计,我将 %s 用于图像,例如:
Moving towards responsive design, I'm using %s for images, e.g.:
#example img {
width: 100%;
height: auto;
max-width: 690px; // Width of the image uploaded.
}
这很好用,但在 Internet Explorer 8 及以下版本中除外.这是因为 height: auto
是 CSS3 的一部分,只有 IE9 以后才支持吗?
This works great, except in Internet Explorer 8 and below. Is this due to height: auto
being part of CSS3, which is only supported by IE9 onwards?
而最重要的部分...关于解决这个问题的方法有什么建议吗?到目前为止,我唯一能想到的就是给它一个最大高度.
And the most important part... any suggestions on a way around this problem? The only thing I can think of so far is to give it a max-height.
谢谢
推荐答案
试试这个:
img {
width: inherit; /* Make images fill their parent's space. Solves IE8. */
max-width: 100%; /* Add !important if needed. */
height: auto; /* Add !important if needed. */
}
或:
img { max-width:100%; height: auto; } /* Enough everywhere except IE8. */
@media screen {img { width: auto }} /* Prevent height distortion in IE8. */
两种解决方案都有效.不同之处在于 width:inherit
使图像填充其父空间,而 width:auto
将它们最大化为它们的实际尺寸.请参阅 fit.css
Both solutions work. The difference is that width:inherit
makes images fill their parent's space whereas width:auto
maxes them at their actual dimensions. See fit.css
这篇关于高度:Internet Explorer 8 及更低版本中的自动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!