首頁 >web前端 >css教學 >為什麼 Inline-Block 在 Internet Explorer 6 和 7 中不起作用,如何修復它?

為什麼 Inline-Block 在 Internet Explorer 6 和 7 中不起作用,如何修復它?

Linda Hamilton
Linda Hamilton原創
2024-12-19 02:00:14593瀏覽

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

Internet Explorer 6 和7 中的內聯塊問題

CSS 中inline-block 的概念允許元素同時表現為內聯和塊級元素同時進行。但是,如果您遇到 inline-block 在 Internet Explorer 6 和 7 中無法運作的問題,那麼您並不孤單。

問題:

預設, inline-block 僅適用於固有的內聯元素,例如 span。將其應用於 IE6 和 IE7 中的 div 等其他元素可能會導致不可預測的行為。

解決方案:

要解決此問題並在非上啟用內聯塊IE6/7 中的內聯元素,您需要採用解決方法。這涉及添加以下 CSS:

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

以下是解決方法的細分:

  • *display: inline 是針對 IE7 及更低版本的「安全」CSS 駭客。它會覆寫 inline-block 設定的顯示屬性。
  • zoom: 1 強制 IE6/7 將「版面配置」套用至元素。佈局對於 inline-block 的一致工作至關重要。

其他注意事項:

可以在保持有效CSS 的同時實現此解決方法,但通常不是這樣推薦,特別是如果您已經在使用其他供應商特定的前綴。

有關顯示的更多見解: inline-block,參考外部資源,但注意 -moz-inline-stack 不再需要,因為它僅適用於 Firefox 2。

以上是為什麼 Inline-Block 在 Internet Explorer 6 和 7 中不起作用,如何修復它?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn