Why Doesn't `display: inline-block` Work in Internet Explorer 7, and How Can I Fix It?

IE7 Display: Inline-Block Ineptitude

Encountering display: inline-block problems in Internet Explorer 7? You're not alone. While this property works flawlessly in Firefox, IE7 appears oblivious to its existence.

The Issue:

With the provided HTML and CSS:

<div class="frame-header">
    <h2>...</h2>
</div>

.frame-header {
    height: 25px;
    display: inline-block;
}

The "frame-header" element in IE7 refuses to behave as an inline-block, hindering desired layout output.

The Solution:

To address this IE7 quirk, employ the following display: inline-block hack:

display: inline-block;
*display: inline;
zoom: 1;

Explanation:

IE7 exhibits limited support for inline-block, recognizing it only within naturally inline elements. For elements outside this category, like "frame-header" in our example, the hack steps in:

• *display: inline; forces inline behavior specifically for IE7 and below.
• zoom: 1; triggers hasLayout, a crucial property for inline-block behavior.

Considerations:

This CSS does not meet validation standards and may potentially disrupt other styles. Hence, consider using an IE7-only stylesheet implemented through conditional comments:

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->

By incorporating this targeted stylesheet, you can address the IE7 display: inline-block issue without compromising overall CSS integrity.

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