為什麼最大寬度不適用於 Firefox 和 Opera 中表格單元格中的影像？

Firefox 和Opera 忽略顯示中的最大寬度：表格單元格

在給定的CSS 程式碼片段中，表格中包含的圖像cell 會忽略Firefox 和Opera 瀏覽器中指定的最大寬度樣式。了解原因並找到跨瀏覽器的解決方案至關重要。

如 W3C 規範所闡明的，最大寬度不適用於內嵌元素。儘管嘗試將圖像的顯示屬性設為阻止，但問題仍然存在。

要修正此行為，必須在包含表格單元格的 div 周圍添加帶有 display: table 的包裝 div。此外，包裝器 div 應包含 table-layout:fixed 屬性。此修改可確保所有提到的瀏覽器都遵守 max-width。

跨瀏覽器解決方案

下面更新的程式碼片段有效解決了問題：

<code class="css"><div style="display: table">
  <div style="display: table-cell; width: 200px; table-layout: fixed;">
    <img src="my-image.jpg" style="max-width: 100%;" />
  </div>
</div></code>

在此程式碼中，表格單元格的包裝div 放置在表格div 內，並且表格佈局設定為固定。此配置可確保跨瀏覽器（包括 Firefox 和 Opera）的一致性。

以上是為什麼最大寬度不適用於 Firefox 和 Opera 中表格單元格中的影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！