如何讓「display: inline-block」在 Internet Explorer 6 和 7 中正常運作？

Internet Explorer 6 和7 中的內聯塊困境

儘管內聯塊被廣泛接受，但它與Internet Explorer 的兼容性並不好6 和7。這個怪癖可能會阻礙您在頁面中有效使用內聯區塊的努力

這種行為的原因在於，在IE6/IE7 中，inline-block 只能在固有的內聯元素（例如span）上正確運行。為了將其範圍擴展到 div 等元素，需要一種解決方法。

克服挑戰

讓內聯塊能夠與 div 和其他區塊級元素一起使用IE6/IE7，使用以下 CSS片段：

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

分解解

1. display: inline-block: 宣告內聯區塊行為。
2. *display: inline: A " safe」CSS hack，針對IE7 及更低版本，強制內嵌
3. zoom: 1:為區塊級元素提供“佈局”，這對於內聯塊在IE6/IE7 中運行至關重要。

其他資訊

雖然可以實現有效的CSS，但應用此解決方法是不實際的，尤其是在其他地方使用了供應商前綴的屬性的情況下。

要更全面地了解 display: inline-block，請參閱相關資源，不包括 -moz-inline-stack，其中僅適用於 Firefox 2。

以上是如何讓「display: inline-block」在 Internet Explorer 6 和 7 中正常運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！