背景CSS图像不显示在IE7中 [英] Background CSS image no showing in IE7 only

问题描述

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 。

Any suggestions would be greatly appreciated as to have the background image also appear on IE7.

推荐答案

text-indent：-100000px; inline-block 是什么导致这两个元素在IE7中不可见，因为有一个错误。

The text-indent: -100000px; in combination with inline-block is what's causing the two elements to not be visible in IE7, due to a bug.

需要找到一些其他方式隐藏文本为IE7（或根本不使用 inline-block ，请参阅下面的这个更合适的修复）。

You need to find some other way to hide the text for IE7 (or not use inline-block at all, see below for this more suitable fix).

选项包括@Sotiris注释中的方法，或：

Options include the method in the comment by @Sotiris, or:

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

$ c> * property：value 多次隐藏IE7中的文本。

Which uses the *property: value hack several times to hide the text in IE7.

这个问题似乎与使用 display：inline-block 有关。

The problem does seem to be related to the use of 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;
}

这篇关于背景CSS图像不显示在IE7中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！