1

これは本当に奇妙です。メニューの各項目に単純な :hover 効果のあるリストメニューがあるこのサイトがあります。

http://w3box.com/mat/

Firefox では問題なく動作します。しかし、少なくともIE7にはラグがあります。私はIE8でテストしていませんが、そこにもあると思います。

現在、コードの検証を試みて、問題の原因を確認しています。そして、同様のシナリオに関する多くの投稿を見てきました。しかし、どれも私の場合には当てはまらないようでした。

ちょうど今、CSS スタイルシートに次のように記述されていることに気付きました。

li:hover {
background-image: url(img/TopLine.png); 
Height:29px;

}

不思議なことに、高さの仕様を外せばラグはありません！何が原因でしょうか? 親のliクラスへのパディングとマージンのレイヤーでしょうか？または、その上の親クラスですか？

これは、これらのアイテムのコードです。サイトの /main.css の下にある残りの css

#header {
padding-right:7%;
height: 57px;
background-image:url(img/TopLine.png); }

.header a {
font-family:georgia;
font-size:22px;
color:#ebebeb;
text-decoration:none; }

.header li {
float:right;
list-style: none;
margin-top:10px;
padding-top:18px;   
padding-left: 23px;
padding-right: 23px;
height:23px; }

li:hover {
background-image: url(img/TopLine.png); 
Height:29px; }

これを改善する方法についてのアイデアはありますか?

4

1 に答える 1

0

私は本当にラグを取得していません。ただし、最初はわずかな遅延があります。これは、背景画像の読み込みが原因である可能性が最も高いです。

リスト項目に適切な背景を設定してから、ホバー時に背景の位置を変更することをお勧めします。（これについてはSOに関する質問がたくさんあります。）

于 2010-01-26T11:31:57.043 に答える