左にテキストがあり、その中の各liの画像がliの右側にある順序付きリストが必要です。そこで、画像を右に浮かせて、画像を右に、テキストを左に正しく配置しましたが、IE と FF では画像が 14 ピクセル低すぎます。クロムはそれを正しく行います。これは、IE と FF がフロートを本来あるべき場所 (Chrome など) の内側ではなく、各 LI の外側または下に配置しているように見えます。IE と FF の位置を -14px (上) に調整すると、問題なく動作しますが、Chrome が台無しになります。14px は各 LI の高さであるため、そのトリックが機能します。
絶対に必要な場合を除き、ブラウザーのハッキングは 1 回もしたくありません (つまり、IE/FF の -14px オフセットを実行し、Chrome にそれを無視するように指示します)。
#top25list{
width:185px;
cursor:n-resize;
list-style:
decimal inside;
padding:0;
margin:0
}
#top25list li{
margin:0;
padding:0 3px;
background-color:#FFF;
border-top:1px solid #990100;
border-bottom:1px solid #990100
}
#top25list img{
border:none;
height:13px;
width:13px;
float:right
}
#top25list li:hover{
background-color:#990100;
color:#FFF
}
li について特別なことは何もありません:
<li id=##>Name <a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a></li>
最初の LI には FF/IE の画像がなく (#2 のように見えます)、#25 の画像はリストの一番下にあるため、参照してください。
3つすべてをChromeのように見せたい. OL/LI を生成する JavaScript がいくつかあり、これはclass=removeTeam
jQuery アクション専用です。このリストは jQuery ソート可能内にあり、jQuery ( .disableSelection();
) でリスト選択を無効にしています。これは単純な CSS であり、jQuery や JavaScript とは何の関係もないと思います。