為什麼 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中文網其他相關文章！