フロートイメージは右のol、テキストは左、ChromeではIE/FFではなく、

Question

の左にテキストがあり、その中にそれぞれのliのイメージが表示されますli。だから私は右に画像を浮かべ、それは画像を正しく右に、テキストを左に置くが、画像はIEとFFで14ピクセル以下である。 Chromeは正しい方法です。これは私がIEとFFでフロートを各LIの外側か外側に置くかのように見えます（Chromeのように）。私がIEとFF用に-14px（up）の位置を調整すると、うまく動作しますが、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 id=##>Name <a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a></li> 

それは、以下の（それは＃2のためだように見えるところ）だと＃ので、最初のLIは、FF/IE用の画像を持っていない参照してください。 25画像がリストの一番下にあります。

私はすべて3がChromeのように見えます。 OL/LIを生成するいくつかのJavaScriptがあり、class=removeTeamはjQueryアクション用です。このリストはjQueryソートの中にあり、jQuery（.disableSelection();）でリストの選択を無効にしています。私はこれがjQueryやJavaScriptとは関係なく、単純なCSSだとは思わない。

Answer 1

IEとFirefoxが共有するバグです。この問題を回避するには、イメージをその行の浮遊していないテキストの前に移動する必要があります。

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

    Name 
</li> 

Answer 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; 
} 
 

私が間違っているかどうかを私に教えてください。

Answer 3

list-style：insideはそれを台無しにしています。

以下は動作するコードです。フロートを＃top25listに移動し、名前の前に移動しました。

#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>