為什麼表格儲存格內影像上的「max-width: 100%」在 Firefox 和 Opera 中的表現與 Chrome 和 IE 中不同？

Firefox 和Opera 中Max-Width 屬性行為的差異

在某些情況下，Firefox 和Opera 瀏覽器在解釋CSS max 方面與Chrome 和IE 相比存在差異-width 屬性。具體來說，當圖像放置在表格單元格(display: table-cell) 中並指定max-width: 100% 時，圖像寬度在Firefox 和Opera 中會被忽略，而在其他瀏覽器中會被正確約束。

要理解此行為背後的原因，請務必注意 W3C 規範中定義的 CSS max-width 屬性僅適用於區塊級元素。內聯元素（例如 ）不受此屬性的影響。在提供的 HTML 中，預設情況下，元素會設定為 display: inline，這解釋了為什麼 Firefox 和 Opera 會忽略 max-width 樣式。

解決方法：

要解決此問題並強制執行預期的圖像寬度，有必要明確設定 要顯示的元素：CSS 樣式內的區塊。但是，使用此解決方法可能會改變頁面佈局和格式。

符合標準的解決方案：

符合標準的解決方案是將表格單元格(display: table-cell) 放置在包裝div 中設定為顯示：表格和表格佈局：固定。這種方法確保表中的所有子元素都遵守指定的寬度約束，包括 和 。最大寬度元素：100%。

替代方法：

另一個選項是利用 JavaScript 來偵測瀏覽器對 display: table-cell 元素中最大寬度的支援。如果瀏覽器本身不支援此行為，則可以使用 JavaScript 實作替代佈局策略。

程式碼範例：

<code class="HTML"><div style="display: table;">
    <div style="display: table-cell; padding: 15px; width: 200px;">
        <img  src="/static/imghwm/default1.png" data-src="..." class="lazy"   style="max-width:90%" alt="為什麼表格儲存格內影像上的「max-width: 100%」在 Firefox 和 Opera 中的表現與 Chrome 和 IE 中不同？" >
        <p>Text content...</p>
    </div>
</div></code>

以上是為什麼表格儲存格內影像上的「max-width: 100%」在 Firefox 和 Opera 中的表現與 Chrome 和 IE 中不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！