【问题标题】:Max-width on images and inline-block in IEIE 中图像和内联块的最大宽度
【发布时间】:2012-06-25 12:01:28
【问题描述】:

我正在尝试使图像适合容器,并带有适合图像宽度的包装 div。我可以成功地做到这一点,但是当我将图像的最大宽度设置为 100%(以确保它适合包含 div)时,它在 IE9/IE8 中不起作用(图像以全宽显示)。在 Chrome 中运行良好。当包装器 div 未设置为内联块时,最大宽度有效。我也尝试过浮动这两个元素,但也没有用。

这是小提琴:http://jsfiddle.net/tbgWv/

【问题讨论】:

  • 这也是 Firefox 的问题。

标签: html internet-explorer css fluid-layout


【解决方案1】:

尝试将width:100%; 添加到img。

【讨论】:

  • 这成功了!我以为这会将图像大小设置为容器的宽度,但事实并非如此。
  • 谢谢。知道发生了什么,为什么?我创建了一个 Codepen 来测试:codepen.io/iamkeir/pen/MYadRO(在 IE8 中查看完整页面:codepen.io/iamkeir/full/MYadRO)另外,有没有更好的解决方法?
  • 这也解决了 Firefox 中的问题。
【解决方案2】:

IE 经常是奇怪的 :D

尝试给图像一个绝对宽度值,就像我做的here

【讨论】:

  • 感谢您的回复!不幸的是,我希望这个 CSS 应用于具有可变宽度的图像,并且我还希望它们扩展到外部容器,所以我不能在不使用 JS 的情况下使用绝对宽度
  • 是的,我认为在这种情况下,如果不使用 JavaScript 检测 IE 并指定宽度,您将无法真正逃脱。
猜你喜欢
  • 1970-01-01
  • 2015-03-03
  • 1970-01-01
  • 2018-09-03
  • 1970-01-01
  • 1970-01-01
  • 2013-06-01
  • 2013-01-11
  • 2011-08-27
相关资源
最近更新 更多