浮动图像在 ol 的 li 内，文本在左，适用于 Chrome，不适用于 IE/FF

Question

我想要一个有序列表，其中左侧有文本，右侧有每个 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 没有什么特别的：

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

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 a 并将 移至名称之前。

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