2

左にテキストがあり、その中の各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=removeTeamjQuery アクション専用です。このリストは jQuery ソート可能内にあり、jQuery ( .disableSelection();) でリスト選択を無効にしています。これは単純な CSS であり、jQuery や JavaScript とは何の関係もないと思います。

4

3 に答える 3

7

IE と Firefox 共通のバグです。これを回避するには、イメージをその行のフローティングされていないテキストの前に移動する必要があります。

<li id=##>
   <a href="#" rel="##" class="removeTeam">
      <img src="/images/button-x.png" alt="Remove Name">
   </a> 

   Name
</li>
于 2009-05-29T16:56:00.783 に答える
2

HTML を変更できない場合は、フロートの代わりに配置を試すことができます。


#top25list li{
  margin:0;
  padding:0 3px 10px 3px; /* add padding-right to make room for the image */
  background-color:#FFF;
  border-top:1px solid #990100;
  border-bottom:1px solid #990100;
  position: relative; /* for img to have position  */
}

#top25list img{
  border:none;
  height:13px;
  width:13px;
  position: absolute;
  top: 0;  
  right: 0; 
}

私はこれをテストしていません。間違っている場合はお知らせください。

于 2009-05-29T17:27:23.460 に答える
0

list-style: 内部がめちゃくちゃです。

以下は動作するコードです。float を #top25list a に移動し、to を名前の前に移動しました。

#top25list{
       width:185px;
       cursor:n-resize;
       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 a{float:right;}
#top25list img{
       border:none;
       height:13px;
       width:13px;
}
#top25list li:hover{
       background-color:#990100;
       color:#FFF
}

<ul id="top25list">
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
</ul>
于 2009-05-30T03:38:52.430 に答える