0

CSS3 PIE で複数の背景を使用しようとしています。IE7 では問題なく動作しますが、IE8 では動作しません。つまり、IE8 では no-repeat、repeat、repeat 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 と position の値を試していました。

4

1 に答える 1

1

OK、ie8 の本当の問題が何かはわかりませんが、ここに解決策があります。IE7 では CSS3 PIE がうまく機能し、IE8 では :before :) がサポートされていることに気付きました。そこで、それを使用して、背景と適切な寸法を持つ新しいブロック要素を追加しました。まだ表示されていなかったので、数分間実験した後、 content: "" がこれを解決することがわかりました。これがいくつかの背景の私のコードです（フッターの一番上の行とフッターの行の間<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;
}
于 2012-08-07T13:38:34.477 に答える