Why Does Max-Width Not Apply to Images in Table Cells in Firefox and Opera?

Firefox and Opera Ignoring Max-Width in Display: Table-Cell

In the given CSS code snippet, the image contained within a table cell ignores the specified max-width style in Firefox and Opera browsers. Understanding the cause and finding a cross-browser solution is crucial.

As clarified in the W3C specifications, max-width does not apply to inline elements. Despite attempts to set the image's display property to block, the issue persists.

To rectify this behavior, a wrapper div with display: table must be added around the div containing the table cell. Additionally, the wrapper div should include the table-layout: fixed property. This modification ensures that max-width is respected in all mentioned browsers.

Cross-Browser Solution

The updated code snippet below effectively solves the problem:

<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>

In this code, the table cell's wrapper div is placed within a table div and table layout is set to fixed. This configuration ensures consistency across browsers, including Firefox and Opera.

The above is the detailed content of Why Does Max-Width Not Apply to Images in Table Cells in Firefox and Opera?. For more information, please follow other related articles on the PHP Chinese website!