為什麼「max-width」在 Firefox 和 Opera 中對於表格單元格中的影像表現不同？

了解 Firefox 和 Opera 之間最大寬度行為的差異

在 Web 開發中，必須確保跨瀏覽器相容性。出現差異的一個領域是表格單元格內 CSS 樣式的處理。在這種情況下，在 max-width 屬性方面，Firefox 和 Opera 與 Chrome 和 IE 相比表現出不同的行為。

考慮以下 HTML 和 CSS 程式碼：

<code class="html"><div style="display: table-cell; padding: 15px; width: 200px;">
  <img src="image.jpg" style="max-width: 100%;" />
  <p>Content</p>
</div></code>

在 Chrome 中和 IE 中，此程式碼正確地將圖片的最大寬度設定為包含儲存格的 100%。然而，在 Firefox 和 Opera 中，最大寬度樣式被忽略。

為什麼會出現差異？

萬維網聯盟 (W3C) 規範規定 max-寬度不適用於內嵌元素。內聯元素（例如圖像）沒有固有的寬度或高度，它們的尺寸通常由它們包含的內容決定。

在提供的範例中，影像標籤是表格儲存格內的內聯元素。因此，max-width 樣式不起作用。

有效的解決方案

要解決此問題並確保跨瀏覽器相容性，您可以採用以下方法:

1. 將表格儲存格div 包裹在另一個div 中，並顯示：表格和表格佈局：固定。
2. 這會強制Firefox 和Opera 對圖像應用最大寬度規則

更新的HTML 和CSS：

<code class="html"><div style="display: table;">
  <div style="display: table-cell; padding: 15px; width: 200px;">
    <img src="image.jpg" style="max-width: 100%;" />
    <p>Content</p>
  </div>
</div></code>

透過實施此解決方法，您可以透過實施此解決方法，您可以在所有主要瀏覽器中保持所需的行為。

以上是為什麼「max-width」在 Firefox 和 Opera 中對於表格單元格中的影像表現不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！