背景 CSS 圖像僅在 IE7 中不顯示

Question

html 是：

<div class="choose-os">
<p>
   <a href="someLink" class="windows">Microsoft Windows</a> 
   <a href="someOtherLink" class="macos">Apple Mac OS</a>
</p>
</div>

CSS 是：

.choose-os {
    margin: 20px 0;
    padding: 20px;
    background: #e7eefa;
}
.choose-os p {
    margin: 0;
}
.choose-os p a {
    display: inline-block;
    text-indent: -100000px;
    height: 56px;
    width: 308px;
}
.choose-os p a.windows {
    background: url(../images/button-windows-bg.png) 0 0;
}
.choose-os p a.macos {
    background: url(../images/button-macos-bg.png) 0 0;
}
.choose-os p a:hover {
    background-position: 0 -56px;
}

任何建議將不勝感激讓背景圖像也出現在 IE7 上。

Answer 1

text-indent: -100000px; 由於一個錯誤，與inline-block結合使用是導致這兩個元素在 IE7 中不可見的原因。

您需要找到其他方法來隱藏 IE7 的文本（或者根本不使用inline-block ，請參閱下面的更合適的修復方法）。

選項包括@Sotiris 評論中的方法，或者：

.choose-os p a {
    display: inline-block;
    height: 56px;
    width: 308px;

    text-indent: -100000px;

    /* for ie7 */
    *text-indent: 0;
    *font-size: 0;
    *line-height: 0
}

它使用*property: value hack 多次隱藏 IE7 中的文本。

---

該問題似乎與display: inline-block的使用有關。

因此，另一種解決方法（我更喜歡我以前的解決方法）是：

.choose-os {
    margin: 20px 0;
    padding: 20px;
    background: #e7eefa;
    overflow: hidden
}
.choose-os p a {
    float: left;
    margin-right: 4px;
    text-indent: -100000px;
    height: 56px;
    width: 308px;
}

Answer 2

要在 IE7 中正確顯示inline-block ，請將以下 styles 添加到.choose-os pa

zoom:1
*display:inline

（星號很重要，現代瀏覽器會忽略它，但 IE6/7 不會）

IE7 不尊重 inline-block，所以你必須做一點魔法才能讓它工作。 這里有一個很好的描述： http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

[編輯] 如果 text-indent 也是罪魁禍首的一部分，您最好堅持使用display:block並在元素上設置float:left 。 可能有多個有效路徑：)

Answer 3

IE7 在 CSS 中有一些嚴重的限制。 我建議避免使用簡寫符號並明確聲明每個屬性，然后在此處驗證 CSS 表。