Question

我尝试使用CSS3 PIE的多个backgorunds。它适用于IE7，但它不适用于IE8。我的意思是在IE8中我可以使用不重复，重复和重复y，但浏览器不会渲染repeat-x背景。这是一个错误吗？这是一些代码：

#footer .links li {
    background: url('../images/common/border_dashed.png') repeat-x, 
                url('../images/common/bullet_marker2.png') 9px 17px no-repeat;
    -pie-background: url('_ui/images/common/bullet_marker2.png') 9px 17px no-repeat, 
                     url('_ui/images/common/border_dashed.png') repeat-x;
    behavior: url(PIE.htc);
}

我试过底部/顶部并以像素为单位。我也在试验z-index和位置值。

Answer 1

好的，我不知道ie8中的真正问题是什么，但这里有解决方案。对于IE7 CSS3 PIE工作得很好，我注意到，IE8支持：之前:)。所以我用它来添加具有背景和适当尺寸的新块元素。它仍然没有显示，所以经过几分钟的实验，我发现内容：“”解决了这个问题。这是我的几个背景的代码（页脚顶行和页脚<li>之间的行）：

.ie8 #footer:before {
    content: "";
    display: block;
    width: inherit;
    height: 10px;
    background: url('../images/common/border_dashed.png') 0 4px repeat-x;
}

.ie8 #footer li {
    position: relative;
}

.ie8 #footer .nav li a:before,
.ie8 #footer .procedures li a:before,
.ie8 #affiliations ul:before {
    content: "";
    position: absolute;
    display: block;
    width: 212px;
    height: 1px;
    background: url('../images/common/border_dashed.png') 0 0 repeat-x;
}

.ie8 #footer .nav li a:before,
.ie8 #footer .procedures li a:before {
    margin: -10px 0 0 -27px;
}

.ie8 #affiliations ul:before {
    margin-top: -5px;
}

CSS3 PIE IE8中的多个背景 - 没有重复-x

1 个答案: