為什麼 `display: inline-block` 在 IE6 和 IE7 中出現故障，如何修復？

Internet Explorer 6 和7 中的內聯區塊相容性問題

儘管CSS 屬性「display: inline-block」被廣泛使用，但它仍然存在舊版本的Internet Explorer 中存在已知的兼容性問題。具體來說，它在 IE6 和 IE7 中無法按預期工作。

IE6/IE7 與Inline-Block 的怪癖

在IE6 和IE7 中，「display: inline-block 「僅在自然內聯的元素（例如跨度）上正常運作。將其應用於 div 等區塊級元素會導致意外行為。

IE6/IE7 的解決方法

要解決IE6 和IE7 中的這些問題，具體的解決方法是必要的：

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

「*display: inline」偽類使用僅針對目標的CSS hack IE7 及更早版本。 “zoom: 1”屬性強制 IE6 和 IE7 將元素識別為具有“佈局”，這是“display: inline-block”正常運作所必需的。

附加說明

雖然技術上可行，但不建議嘗試在使用供應商前綴屬性的同時保持此解決方法有效的 CSS。若要全面了解「display: inline-block」及其相容性問題，請參閱提供的答案中的連結資源。

以上是為什麼 `display: inline-block` 在 IE6 和 IE7 中出現故障，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！