为什么 Firefox 和 Opera 中 `max-width` 会忽略 `display: table-cell` 内的图像？

浏览器与 max-width 不一致 内部显示：table-cell

在某些情况下，max-width 样式属性在显示内被忽略：Firefox 和 Opera 中的表格单元格元素，即使它在 Chrome 和 IE 中正确显示。这种不一致引发了对其原因和最合适解决方案的疑问。

原因

根据 W3C 规范，max-width 不适用于内联元素。然而，display: table-cell 中的图像在大多数浏览器中被视为块状，而 Firefox 和 Opera 将它们视为内联。这种解释上的差异会导致行为不一致。

解决方法

一种解决方法是将 display: table-cell 包装 div 放在另一个带有 display: table 和表格布局：固定。这会强制 Firefox 和 Opera 遵守最大宽度规则。

示例

<code class="html"><div style="display: table">
  <div style="display: table-cell; padding: 15px; width: 200px">
    <img src="image.jpg" style="max-width: 100%" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
    </p>
  </div>
</div></code>

推荐

最符合标准的方法是避免在内联元素上使用最大宽度，包括显示中的图像：表格单元格。相反，使用替代方法来控制此类元素的宽度。

以上是为什么 Firefox 和 Opera 中 `max-width` 会忽略 `display: table-cell` 内的图像？的详细内容。更多信息请关注PHP中文网其他相关文章！