解決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="image.png" style="max-width: 100%;" />
<p>Content goes here...</p>
</div>
</div></code>透過使用此技術，您可以在表格單元格內保持所需的圖像縮放，同時確保跨瀏覽器相容性。
以上是為什麼 Firefox 和 Opera 不遵守 Display: table-cell 內部影像的最大寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
