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>

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>

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

3 个答案: