1

ナビゲーション画像のスプライトの背景位置を使用しています。クロム、サファリ、ffなどで見栄えがします。水平方向のプロパティはIEで機能するようですが、垂直方向では機能しません。それはいたるところにあります。逆に、私は別のサイトにほぼ同じコードを持っていますが、そのスプライトは水平にセットアップされました。

これがcssです。潜在的な修正としてbackground-position-x/yを追加しましたが、IEもその影響を受けていないようです（Winebottler IE7のインストールにキャッシュのバグがない限り）。私は新しいので、これで初心者のものを説明します：

#menu-item-16 a {
background-image: url("images/csg.png");
background-position: 0 -510px;   
background-position-x: 0;
background-position-y: -510px;
background-repeat: no-repeat;
background-size: 400px auto;
display: block;
height: 80px;
margin-left: 0;
margin-top: -13px;
outline: none;
padding: 0;
text-indent: -9999px;
width: 400px;
}
#menu-item-16 a:hover {
    background-position: 0 -638px;
    background-position-x: 0;
    background-position-y: -638px;
}
#menu-item-24 a {
    background-image: url("images/csg.png");
    background-position: 0 0;
    background-position-x: 0;
    background-position-y: 0;
    background-repeat: no-repeat;
    background-size: 400px auto;
    display: block;
    height: 80px;
    margin-left: 0;
    margin-top: -10px;
    outline: none;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
}
#menu-item-24 a:hover {
    background-position: 0 -128px;
    background-position-x: 0;
    background-position-y: -128px;
}
#menu-item-15 a {
    background-image: url("images/csg.png");
    background-position: 0 -1025px;
    background-position-x: 0;
    background-position-y: -1025px;
    background-repeat: no-repeat;
    background-size: 400px auto;
    display: block;
    height: 80px;
    margin-left: 0;
    margin-top: -13px;
    outline: none;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
}
#menu-item-15 a:hover {
    background-position: 0 -1153px;
    background-position-x: 0;
    background-position-y: -1153px;
}
#menu-item-13 a {
    background-image: url("images/csg.png");
    background-position: 0 -1282px;
    background-position-x: 0;
    background-position-y: -1282px;
    background-repeat: no-repeat;
    background-size: 400px auto;
    display: block;
    height: 80px;
    margin-left: 0;
    margin-top: -13px;
    outline: none;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
}
#menu-item-13 a:hover {
    background-position: 0 -1409px;
    background-position-x: 0;
    background-position-y: -1409px;
}
#menu-item-14 a {
    background-image: url("images/csg.png");
    background-position: 0 -769px;
    background-position-x: 0;
    background-position-y: -769px;
    background-repeat: no-repeat;
    background-size: 400px auto;
    display: block;
    height: 80px;
    margin-left: 0;
    margin-top: -13px;
    outline: none;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
}
#menu-item-14 a:hover {
    background-position: 0 -897px;
    background-position-x: 0;
    background-position-y: -897px;
}
#menu-item-28 a {
    background-image: url("images/csg.png");
    background-position: 0 -257px;
    background-position-x: 0;
    background-position-y: -257px;
    background-repeat: no-repeat;
    background-size: 400px auto;
    display: block;
    height: 80px;
    margin-left: 0;
    margin-top: -13px;
    outline: none;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
}
#menu-item-28 a:hover {
    background-position: 0 -385px;
    background-position-x: 0;
    background-position-y: -385px;
}
4

3 に答える 3

1

ところで、css コードは壊れていない最後のエントリを参照するため、上記のコードはうまく機能しません。

background-position: 0 0;
background-position-x: 0;
background-position-y: 0;
于 2012-05-25T18:14:51.770 に答える
0

まず、background-position-x と background-position-y は Firefox では機能しません。ただし、クロスブラウザでは次のように機能します。

background-position-x: 300px;
background-position: 300px 0;
background-position-y: 300px;
background-position: 0 300px;

IE と Chrome は background-position-x と background-position-y をサポートしていますが、イベントで background-position-y を変更しようとすると、IE はうまく機能しません。上記のコードを試して、明示的な配置を x 座標と y 座標に置き換えることができます。

于 2012-05-25T18:11:40.710 に答える
0

IE 用に背景位置を調整する代替スタイル シートを追加する必要がありました。奇妙なことに、最初はこのスプライト ジェネレーターを使用して時間を節約していました。独自のcssで吐き出す座標は、FF、Chromeなどではかなりずれていましたが、IEでは正確でした-それらを比較しました。

于 2012-05-09T00:25:54.410 に答える