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，请将以下样式添加到.choose-os p a

zoom:1
*display:inline

（明星很重要！它被现代浏览器忽略，但不是IE6 / 7）

IE7不尊重内联块，所以你必须做一点魔术才能使它工作。这里有一个很好的描述：http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

[edit]如果text-indent也是罪魁祸首的一部分，你可能最好坚持display:block并在你的元素上设置float:left。可能需要多个有效路径：）

Answer 3

IE7在CSS中有一些严重的限制。我建议避免使用简写符号并明确声明每个属性，然后验证CSS表here。

背景CSS图像仅在IE 7中显示

3 个答案: