Why Don\'t Firefox and Opera Respect Max-Width on Images Within Display: table-cell?

Addressing max-width Ignoration in Firefox and Opera within Display: table-cell

Despite the specification of max-width for images, Firefox and Opera ignore this style within display: table-cell. This can lead to unexpected behavior when attempting to constrain the width of images in table-like structures.

Reason for Ignoring Max-Width

According to the W3C specification, the max-width property does not apply to inline elements. Images, by default, are inline elements. Therefore, within a table cell (which acts as an inline element), max-width is disregarded.

Workaround and W3C Standards Compliance

One workaround involves nesting the containing table cell div within another div that has display: table and table-layout: fixed. By setting these properties on the parent container, both Firefox and Opera respect the max-width rule for images within the table cells.

This solution ensures compliance with the W3C spec, as it does not modify the default inline nature of images within display: table-cell. It simply adds a table structure to the parent container, forcing the browsers to treat the inner cells as table cells rather than inline elements.

Example

Below is an example of this workaround in action:

<code class="html">&lt;div style=&quot;display: table;&quot;&gt;
  &lt;div style=&quot;display: table-cell; padding: 15px; width: 200px;&quot;&gt;
    &lt;img src=&quot;image.png&quot; style=&quot;max-width: 100%;&quot; /&gt;
    &lt;p&gt;Content goes here...&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code>

By using this technique, you can maintain desired image scaling within table cells while ensuring cross-browser compatibility.

The above is the detailed content of Why Don\'t Firefox and Opera Respect Max-Width on Images Within Display: table-cell?. For more information, please follow other related articles on the PHP Chinese website!