背景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;
}