为什么 Firefox 和 Opera 不遵守 Display: table-cell 内图像的最大宽度？

解决 Firefox 和 Opera 中 Display: table-cell 中的最大宽度忽略问题

尽管有图像最大宽度的规范，Firefox Opera 会忽略 display: table-cell 中的这种样式。当尝试限制表格结构中的图像宽度时，这可能会导致意外行为。

忽略 Max-Width 的原因

根据 W3C 规范， max-width 属性不适用于内联元素。默认情况下，图像是内联元素。因此，在表格单元格（充当内联元素）内，最大宽度将被忽略。

解决方法和 W3C 标准合规性

一种解决方法涉及嵌套包含另一个具有 display: table 和 table-layout: 固定的 div 中的 table cell div。通过在父容器上设置这些属性，Firefox 和 Opera 都会遵守表格单元格内图像的最大宽度规则。

此解决方案确保符合 W3C 规范，因为它不会修改默认的内联性质显示内图像的数量：表格单元格。它只是向父容器添加一个表格结构，强制浏览器将内部单元格视为表格单元格而不是内联元素。

示例

下面是一个示例此解决方法的实际应用：

<code class="html"><div style="display: table;">
  <div style="display: table-cell; padding: 15px; width: 200px;">
    <img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy"   style="max-width:90%" alt="为什么 Firefox 和 Opera 不遵守 Display: table-cell 内图像的最大宽度？" >
    <p>Content goes here...</p>
  </div>
</div></code>

通过使用此技术，您可以在表格单元格内保持所需的图像缩放，同时确保跨浏览器兼容性。

以上是为什么 Firefox 和 Opera 不遵守 Display: table-cell 内图像的最大宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！