Why Doesn't Inline-Block Work in Internet Explorer 6 and 7, and How Can I Fix It?

Inline Block Troubles in Internet Explorer 6 and 7

The concept of inline-block in CSS allows elements to behave as both inline and block-level elements simultaneously. However, if you're encountering issues with inline-block not working in Internet Explorer 6 and 7, you're not alone.

The Problem:

By default, inline-block only works on inherently inline elements, such as spans. Applying it to other elements like divs in IE6 and IE7 can lead to unpredictable behavior.

The Solution:

To resolve this issue and enable inline-block on non-inline elements in IE6/7, you'll need to employ a workaround. This involves adding the following CSS:

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

Here's a breakdown of the workaround:

• *display: inline is a "safe" CSS hack that targets IE7 and lower. It overrides the display property set by the inline-block.
• zoom: 1 forces IE6/7 to apply "layout" to the element. Layout is essential for inline-block to work consistently.

Additional Considerations:

It's possible to implement this workaround while maintaining valid CSS, but it's generally not recommended, especially if you're already using other vendor-specific prefixes.

For further insights on display: inline-block, refer to external resources, but note that -moz-inline-stack is no longer necessary as it only applied to Firefox 2.

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