为什么最大宽度不适用于 Firefox 和 Opera 中表格单元格中的图像？

Firefox 和 Opera 忽略显示中的最大宽度：表格单元格

在给定的 CSS 代码片段中，表格中包含的图像cell 会忽略 Firefox 和 Opera 浏览器中指定的最大宽度样式。了解原因并找到跨浏览器的解决方案至关重要。

正如 W3C 规范中所阐明的，最大宽度不适用于内联元素。尽管尝试将图像的显示属性设置为阻止，但问题仍然存在。

要纠正此行为，必须在包含表格单元格的 div 周围添加带有 display: table 的包装 div。此外，包装器 div 应包含 table-layout:fixed 属性。此修改可确保所有提到的浏览器都遵守 max-width。

跨浏览器解决方案

下面更新的代码片段有效解决了问题：

<code class="css"><div style="display: table">
  <div style="display: table-cell; width: 200px; table-layout: fixed;">
    <img src="my-image.jpg" style="max-width: 100%;" />
  </div>
</div></code>

在此代码中，表格单元格的包装 div 放置在表格 div 内，并且表格布局设置为固定。此配置可确保跨浏览器（包括 Firefox 和 Opera）的一致性。

以上是为什么最大宽度不适用于 Firefox 和 Opera 中表格单元格中的图像？的详细内容。更多信息请关注PHP中文网其他相关文章！