漂浮的图像内的权利李的ol、文字的左边，工作在铬、不IE/FF

Question

我想有一个有序的名单，有的在左边的文本和图像用于各李内的它的权利。所以我漂浮的图像的权利和它把图像正确地上的权利，并在左边的文本，但图像是14素太低，即和FF.铬不正确的。这看来我可以即和FF把浮子外面或者下面各李而不是它应该(如浏览器).如果调整位置-14px(达)对即和FF，它工作得很好，但那是搞砸了。14px是高度的每个李这就是为什么绝招的工作。

我不想一个单一的浏览器的黑客，除非绝对需要的(即，做-14px偏IE/FF告诉铬忽略)。

#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个看起来像的。有一些JavaScript生产OL/LIs， class=removeTeam 只是技术的行动。这个名单是在jQuery的排序和我有列选择无障碍字(.disableSelection();).我不认为这有任何字或JavaScript，只是简单的CSS。

Answer 1

这是一个错误，即和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

列表格:里面是搞乱了。

下面是代码的工作。我移动的浮到#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>