[英]Background CSS image no showing in IE7 only
The html is: 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>
The CSS is: 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;
}
Any suggestions would be greatly appreciated as to have the background image also appear on IE7.任何建议将不胜感激让背景图像也出现在 IE7 上。
The text-indent: -100000px;
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.由于一个错误,与inline-block
结合使用是导致这两个元素在 IE7 中不可见的原因。
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).您需要找到其他方法来隐藏 IE7 的文本(或者根本不使用inline-block
,请参阅下面的更合适的修复方法)。
Options include the method in the comment by @Sotiris, or:选项包括@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
}
Which uses the *property: value
hack several times to hide the text in IE7.它使用*property: value
hack 多次隐藏 IE7 中的文本。
The problem does seem to be related to the use of display: inline-block
.该问题似乎与display: inline-block
的使用有关。
So, another workaround ( which I prefer to my previous one ) is:因此,另一种解决方法(我更喜欢我以前的解决方法)是:
.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;
}
To display inline-block
properly in IE7, add the following styles to .choose-os pa
要在 IE7 中正确显示inline-block
,请将以下 styles 添加到.choose-os pa
zoom:1
*display:inline
(The star is important, It's ignored by modern browsers, but not IE6/7) (星号很重要,现代浏览器会忽略它,但 IE6/7 不会)
IE7 doesn't respect inline-block, so you have to do a little magic to make it work. IE7 不尊重 inline-block,所以你必须做一点魔法才能让它工作。 There's a great description here: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/这里有一个很好的描述: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
[edit] If text-indent is also part of the culprit, you may be better of sticking with display:block
and setting float:left
on your elements. [编辑] 如果 text-indent 也是罪魁祸首的一部分,您最好坚持使用display:block
并在元素上设置float:left
。 Probably multiple valid paths to take:)可能有多个有效路径:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.