浮动图像就在ol的li,文本左侧,在Chrome中运行,而不是IE/FF

Question

我希望有一个有序列表,左侧有文本,而li右侧有每个li的图像.所以我将图像浮动到右边,它将图像正确地放在右边,文本放在左边,但是在IE和FF中图像的像素太低了14个像素.Chrome做得对.在我看来,这是IE和FF将浮动放在每个LI的外部或下方而不是它应该在的内部(如Chrome).如果我为IE和FF调整位置-14px(向上),它可以正常工作,但Chrome会搞砸.14px是每个LI的高度,这就是为什么这个技巧有效.

除非绝对需要,否则我不想要单个浏览器黑客攻击(即,为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>

看到第一个LI没有FF/IE的图像,因为它在下面(它看起来像#2),而#25图像不在列表的底部.

我希望所有3看起来像Chrome.有一些JavaScript生成OL/LI,它只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>