為什麼 Firefox 和 Opera 中 `max-width` 會忽略 `display: table-cell` 內的影像？

瀏覽器與max-width 不一致內部顯示：table-cell

在某些情況下，max-width 樣式屬性在顯示內被忽略：Firefox 和Opera 中的表格單元元素，即使它在Chrome 和IE 中正確顯示。這種不一致引發了對其原因和最合適解決方案的疑問。

原因

根據 W3C 規範，max-width 不適用於內嵌元素。然而，display: table-cell 中的圖像在大多數瀏覽器中被視為塊狀，而 Firefox 和 Opera 將它們視為內聯。這種解釋上的差異會導致行為不一致。

解決方法

一種解決方法是將 display: table-cell 包裝 div 放在另一個帶有 display: table 和表格佈局：固定。這會強制 Firefox 和 Opera 遵守最大寬度規則。

範例

<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.jpg" class="lazy"   style="max-width:90%" alt="為什麼 Firefox 和 Opera 中 `max-width` 會忽略 `display: table-cell` 內的影像？" >
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
    </p>
  </div>
</div></code>

建議

最符合標準的方法是避免在內嵌元素上使用最大寬度，包括顯示中的圖像：表格單元格。相反，使用替代方法來控制此類元素的寬度。

以上是為什麼 Firefox 和 Opera 中 `max-width` 會忽略 `display: table-cell` 內的影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！