max-width 在 Mozilla 和 IE 中不起作用

Posted 2023-03-06

【中文标题】max-width 在 Mozilla 和 IE 中不起作用

【英文标题】：max-width is not working in mozilla and IE

【发布时间】：2012-06-27 14:13:09

【问题描述】：

图像仅在 chrome 中基于浏览器宽度进行缩放，但在 IE 和 Mozilla Firefox 中不起作用。 thumb img 在所有浏览器中都可以使用，但只有 .play img max-width 不起作用 这是我的 html

<div class="contai">
        <div> <img src="1.png" style="max-width:100%" /></div>
       <div class="thumb">
         <img src="2.jpg" />
              <div class="play"> <img src="videoImagePlay.png" /></div>
       </div>
 </div>

CSS

    .contai
    width:100%;

.thumb
    border: 1px solid rgb(226, 226, 226);
   position:relative; float:left; width:38%

.thumb img
    max-width:100%

.play
     position:absolute; top:30%; left:35%

.play img
    max-width:50%

【参考方案1】：

玩上课 right : 0

像这样

.play     
     position:absolute; top:30%; left:35%; right:0;
  

现场演示http://jsfiddle.net/puS7u/

【参考方案2】：

看到这个fiddle。它可能会帮助你。

【参考方案3】：

这可能对将来的某人有所帮助： 如果图像的父级是表（无论在节点树中有多高），那么 max-width 将在 FF 或 IE 中不起作用，除非您在表上定义了特定像素的最大宽度。但是，这在 Chrome 中可以正常工作。

逻辑似乎是FF和IE认为表格总是应该根据内容展开，而不考虑max-width: 100%。

不明显哪个浏览器具有“正确”或最佳实现。

【讨论】：

好吧，鉴于它理解 width: 100%，我会说它显然是一个盒子。带有“width:X”的东西应该总是