Why Does `display: inline-block` Break in IE6 and IE7, and How Can I Fix It?

Inline-Block Compatibility Issues in Internet Explorer 6 and 7

Despite its widespread use, the CSS property "display: inline-block" has known compatibility issues in older versions of Internet Explorer. Specifically, it fails to work as expected in IE6 and IE7.

IE6/IE7 Quirks with Inline-Block

In IE6 and IE7, "display: inline-block" only functions properly on elements that are naturally inline, such as spans. Applying it to block-level elements like divs leads to unexpected behavior.

Workaround for IE6/IE7

To resolve these issues in IE6 and IE7, a specific workaround is necessary:

#yourElement {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

The "*display: inline" pseudo-class uses a CSS hack that targets only IE7 and earlier. The "zoom: 1" property forces IE6 and IE7 to recognize the element as having "layout," which is required for "display: inline-block" to function correctly.

Additional Notes

While technically possible, it's not recommended to attempt to keep this workaround valid CSS while also using vendor-prefixed properties. For a comprehensive understanding of "display: inline-block" and its compatibility quirks, refer to the linked resource in the provided answer.

The above is the detailed content of Why Does `display: inline-block` Break in IE6 and IE7, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!