不在IE8中显示的标签上的CSS背景图像

时间:2012-02-23 18:21:46

标签: css internet-explorer-8 background

我研究了这个并发现了一些IE CSS错误,但是没有一个已知的修补程序似乎涵盖了这种情况。

这个网站今天上线了,发现的问题是IE8的某些版本中没有显示徽标。如果此人将IE重置为出厂设置,则可以正常工作,否则徽标将不可见。

网站可以在这里看到:http://www.ethicsgame.com/exec/site/index.html

显示徽标的CSS是

h1 a {

background:url(images/logosmall.gif) no-repeat left center;
padding-left:325px;
text-decoration:none;
color:#1f396d;
position:relative;
top:45px;
left:15px;
width: 325px;

}

5 个答案:

答案 0 :(得分:2)

它似乎在我的IE8上工作正常,你尝试将display: inline-block添加到其CSS中吗?另外,为了更好地衡量,您可以在标签内部放置 

所以你得到:

<h1><a href="index.html">&nbsp;</a></h1>

只是因为它有内容......

祝你好运 -

答案 1 :(得分:0)

看起来与IE8与Chrome的间距有所不同。在小提琴中查看:http://jsfiddle.net/5Vt3f/

基本上你的图像可能正在显示,只是在左边太远,以至于它不可见。

此外,您在图像上有“左”和“中心”。这是相互矛盾的。它可以是左侧还是中间位置。

答案 2 :(得分:0)

玛丽,

这与A标签是内联元素的事实有关。在IE中&lt; 8,元素的高度/宽度不会被渲染 - 因此它会崩溃并变得不可见。将display: block;添加到此元素的CSS声明中将在IE&lt; 8.您将要将此相同的原理应用于其他内联元素,您试图使其更像块级元素(设置宽度/高度/边距/填充通常是对此行为的良好提示)。< / p>

如果您不需要支持IE 5.5(现在大多数人都不支持),您也可以使用display: inline-block;(请记住,IE 6-7仅支持对元素的内联块)自然内联元素,如A,SPAN,STRONG,EM等)。您可以在此处找到更多有用的兼容性信息 http://quirksmode.org/css/display.html

你可能会注意到,一旦你改变了那种显示类型,那么未被渲染的填充将是 - 所以你可能需要稍微改变那个标记来补偿。

使用IE中的开发人员工具栏是测试旧版本以及在旧版本中测试这些解决方案的好方法。

答案 3 :(得分:0)

它在IE8上运行得非常好,但是如果没有显示早期版本的IE,那么在背景属性中用替换 center

background:url(images/logosmall.gif) no-repeat center left;

答案 4 :(得分:0)

ie8不支持背景图像位置,在您的情况下为“左中心”。如果你删除“中间左侧”它应该工作。如果指定!DOCTYPE

,则可以指定背景图像位置