How Can I Make `display: inline-block` Work Correctly in Internet Explorer 6 and 7?

Inline-block Dilemma in Internet Explorer 6 and 7

Despite its wide acceptance, inline-block doesn't play well with Internet Explorer 6 and 7. This quirk can hinder your efforts to use inline-block effectively for page layouts.

The reason for this behavior lies in the fact that, in IE6/IE7, inline-block only functions correctly on inherently inline elements, such as spans. To extend its reach to elements like divs, a workaround is necessary.

Overcoming the Challenge

To make inline-block work with divs and other block-level elements in IE6/IE7, employ the following CSS snippet:

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

Breaking Down the Solution

1. display: inline-block: Declares inline-block behavior.
2. *display: inline: A "safe" CSS hack that targets IE7 and below, forcing inline behavior.
3. zoom: 1: Provides "layout" for block-level elements, which is crucial for inline-block to function in IE6/IE7.

Additional Information

While it is possible to achieve valid CSS while applying this workaround, it's not practical, especially if vendor-prefixed properties are used elsewhere.

For a more comprehensive understanding of display: inline-block, refer to relevant resources, excluding -moz-inline-stack, which only applies to Firefox 2.

The above is the detailed content of How Can I Make `display: inline-block` Work Correctly in Internet Explorer 6 and 7?. For more information, please follow other related articles on the PHP Chinese website!