2

我想要一个有序列表，左侧有文本，右侧有每个 li 的图像。所以我将图像浮动到右边，它把图像正确地放在右边，把文本放在左边，但是在 IE 和 FF 中图像太低了 14 像素。Chrome 做得对。在我看来，这似乎是 IE 和 FF 将浮动放在每个 LI 的外部或下方，而不是放在它应该在的内部（如 Chrome）。如果我为 IE 和 FF 调整位置 -14px（向上），它对它们来说效果很好，但是 Chrome 就搞砸了。14px 是每个 LI 的高度，这就是该技巧有效的原因。

除非绝对需要（即，为 IE/FF 设置 -14px 偏移量并告诉 Chrome 忽略它），否则我不想要单个浏览器 hack。

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

4

3 回答 3

7

这是 IE 和 Firefox 共享的错误。要解决它，您必须将图像移动到其行中的任何非浮动文本之前。

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

   Name
</li>
于 2009-05-29T16:56:00.783 回答
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; 
}

我没有测试过，如果我错了，请告诉我。

于 2009-05-29T17:27:23.460 回答
0

list-style: inside 搞砸了。

下面是有效的代码。我将浮点数移至 #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>
于 2009-05-30T03:38:52.430 回答