Why does `max-width: 100%` on an image inside a table cell behave differently in Firefox and Opera compared to Chrome and IE?

Discrepancy in Max-Width Property Behavior in Firefox and Opera

In certain scenarios, Firefox and Opera browsers exhibit a discrepancy compared to Chrome and IE in interpreting the CSS max-width property. Specifically, when an image is placed within a table cell (display: table-cell) and assigned max-width: 100%, the image width is ignored in Firefox and Opera, while it is correctly constrained in the other browsers.

To understand the reason behind this behavior, it's crucial to note that the CSS max-width property is defined in the W3C spec to apply only to block-level elements. Inline elements, such as , are not affected by this property. In the provided HTML, the element is set to display: inline by default, which explains why Firefox and Opera ignore the max-width styling.

Workaround:

To resolve this issue and enforce the intended image width, it's necessary to explicitly set the element to display: block within the CSS styles. However, using this workaround may alter the page layout and formatting.

Compliant Solution:

A standards-compliant solution is to place the table cell (display: table-cell) within a wrapper div that is set to display: table and table-layout: fixed. This approach ensures that all child elements within the table adhere to the specified width constraints, including the element with max-width: 100%.

Alternative Approach:

Another option is to utilize JavaScript to detect browser support for max-width within display: table-cell elements. If the browser does not natively support this behavior, an alternative layout strategy can be implemented using JavaScript.

Code Example:

<code class="HTML"><div style="display: table;">
    <div style="display: table-cell; padding: 15px; width: 200px;">
        <img  src="/static/imghwm/default1.png" data-src="..." class="lazy"   style="max-width:90%" alt="Why does `max-width: 100%` on an image inside a table cell behave differently in Firefox and Opera compared to Chrome and IE?" >
        <p>Text content...</p>
    </div>
</div></code>

The above is the detailed content of Why does `max-width: 100%` on an image inside a table cell behave differently in Firefox and Opera compared to Chrome and IE?. For more information, please follow other related articles on the PHP Chinese website!