背景CSS图片在IE7中无法显示

Question

背景CSS图片在IE7中无法显示

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上显示的建议都将不胜感激。

- Stephane Grenier

现网页链接为：http://www.landlordmax.com/downloads - Stephane Grenier

3个回答

0

为了在IE7中正确显示inline-block，请将以下样式添加到.choose-os p a中

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。可能有多条有效路径可选 :)

- Dominic

inline-block 在 IE7 中可以工作，只要元素具有 inline 的默认样式（当然，a 元素就是这种情况）。如果你要设置的元素具有 block 的默认样式，则需要使用此 hack。 - Spudley

挺好的。浮动元素仍然是更好的解决方案；只是inline-block这个选项突然出现在我面前。 - Dominic

-1

IE7在CSS方面有一些严重的限制。我建议避免使用简写符号，而是明确声明每个属性，然后验证CSS样式表这里。

- Jeremy Holovacs

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

text-indent: -100000px;与inline-block结合使用会导致两个元素在IE7中不可见，这是一个bug造成的。

你需要找到其他方法来隐藏文本以适应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的方法来在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;
}