高度：在 Internet Explorer 8 及更低版本中自动

Posted 2023-03-06

【中文标题】高度：在 Internet Explorer 8 及更低版本中自动

【英文标题】：Height: Auto in Internet Explorer 8 and below

【发布时间】：2012-01-26 11:03:21

【问题描述】：

转向响应式设计，我将 %s 用于图像，例如：

#example img 
    width: 100%;
    height: auto;
    max-width: 690px; // Width of the image uploaded.

这很好用，但在 Internet Explorer 8 及更低版本中除外。这是因为height: auto 是 CSS3 的一部分，而 CSS3 仅受 IE9 及更高版本支持？

最重要的部分...关于解决这个问题的方法有什么建议吗？到目前为止我唯一能想到的就是给它一个最大高度。

谢谢

【参考方案1】：

试试这个：

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 \0screen img  width: auto  /* Prevent height distortion in IE8. */

两种解决方案都有效。不同之处在于width:inherit 使图像填充其父空间，而width:auto 将它们最大化为实际尺寸。请参阅fit.css

【讨论】：

唯一对我有用的是：@media \0screen img width: auto /* Prevent height distortion in IE8. */

这解决的不仅仅是 IE 8。为我修复了 IE 11 中的一个问题。真是一团糟。

这在 IE11 中也为我解决了这个问题。起初添加“宽度：继承”并没有解决它。感谢 ryanve 的解释（太有帮助了！！！）我意识到我需要修改图像的容器，所以我也给了它“宽度：100%”。我在顶部有一个图像，并希望在其顶部有文本，所以这是我最终得到的代码： .containerBox position: relative;显示：内联块；宽度：100%； 然后对于图像： .img display: block;最大宽度：100%；高度：自动；边距：自动；填充：自动；宽度：继承；