Why Does `display: inline-block` Need a Hack for Internet Explorer 6 and 7?

Cross-Platform Compatibility Issues: Inline Block in Internet Explorer 6 and 7

The display: inline-block property, designed to simulate inline elements with block-like display attributes, faces compatibility challenges in Internet Explorer versions 6 and 7. Unlike naturally inline elements, non-inline elements like divs require specific modifications to achieve inline-block behavior.

Solution for Internet Explorer 6 and 7:

To overcome this compatibility issue, additional CSS is necessary to supplement the display: inline-block property for non-inline elements:

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

• display: inline-block: Establishes the desired display behavior.
• *display: inline: A "safe" CSS hack that targets IE7 and earlier versions.
• zoom: 1: Provides hasLayout in IE6/7, which is required for inline-block to work consistently.

Additional Notes:

• This workaround maintains valid CSS, especially when used in conjunction with vendor-specific prefixes.
• For further information regarding display: inline-block and its intricacies, refer to relevant documentation.

The above is the detailed content of Why Does `display: inline-block` Need a Hack for Internet Explorer 6 and 7?. For more information, please follow other related articles on the PHP Chinese website!