Why Does `max-width` Ignore Images Inside `display: table-cell` in Firefox and Opera?

Browser Inconsistencies with max-width Inside display: table-cell

In certain circumstances, the max-width style property is ignored within display: table-cell elements in Firefox and Opera, even if it displays correctly in Chrome and IE. This inconsistency raises questions about its cause and the most appropriate solution.

Cause

According to the W3C specification, max-width does not apply to inline elements. However, images within display: table-cell are considered block-like in most browsers, while Firefox and Opera treat them as inline. This difference in interpretation results in the inconsistent behavior.

Workaround

One workaround is to place the display: table-cell wrapper div inside another div with display: table and table-layout: fixed. This forces Firefox and Opera to respect the max-width rule.

Example

<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>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
    </p>
  </div>
</div></code>

Recommendation

The most standards-compliant approach is to avoid using max-width on inline elements, including images within display: table-cell. Instead, use alternative methods for controlling the width of such elements.

The above is the detailed content of Why Does `max-width` Ignore Images Inside `display: table-cell` in Firefox and Opera?. For more information, please follow other related articles on the PHP Chinese website!