為什麼「display: inline-block」在 Internet Explorer 7 中不起作用，如何修復它？

IE7 顯示：內聯區塊無能

在 Internet Explorer 7 中遇到顯示：內聯區塊問題？你並不孤單。雖然此屬性在 Firefox 中完美運行，但 IE7 似乎忽略了它的存在。

問題：

使用提供的 HTML 和 CSS：

<div class="frame-header">
    <h2>...</h2>
</div>

.frame-header {
    height: 25px;
    display: inline-block;
}

IE7中的「frame-header」元素拒絕充當內聯塊，從而阻礙了所需的佈局

解決方案：

要解決此IE7 怪癖，請使用以下顯示：內聯塊hack：

display: inline-block;
*display: inline;
zoom: 1;

說明：

IE7 對以下內容的支援有限inline-block，僅在自然內聯元素中識別它。對於此類別之外的元素，例如我們範例中的“frame-header”，駭客步驟如下：

• *display: inline; 強制專門針對IE7 及更低版本的內聯行為。
• zoom: 1; 觸發hasLayout，這是inline-block 的一個重要屬性

注意事項：

注意事項：

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->

注意事項：注意事項：注意事項：注意事項：注意事項：注意事項：注意： 🎜>此CSS 不符合驗證標準，可能會破壞其他樣式。因此，請考慮使用透過條件註解實現的僅IE7 樣式表：透過合併此目標樣式表，您可以解決IE7 顯示：內聯區塊問題，而不會影響整體CSS 完整性。

以上是為什麼「display: inline-block」在 Internet Explorer 7 中不起作用，如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！