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

时间:2011-07-17 19:44:52

标签: html css internet-explorer-7

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上也会出现背景图片。

3 个答案:

答案 0 :(得分:11)

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

答案 1 :(得分:0)

要在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。可能需要多个有效路径:)

答案 2 :(得分:-1)

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