Изображение с плавающей точкой справа от li, текст слева, работает в Chrome, а не в IE / FF

Question

Я хотел бы иметь упорядоченный список с текстом слева и изображением для каждого li внутри него справа от li. Поэтому я поместил изображение вправо, и оно правильно разместит изображение справа, а текст - слева, но в IE и FF изображение слишком низкое на 14 пикселей. Chrome делает это правильно. Мне кажется, что IE и FF размещают плавающий элемент снаружи или под каждым LI, а не внутри того места, где он должен быть (например, Chrome). Если я отрегулирую положение -14px (вверх) для IE и FF, у них это нормально работает, но тогда Chrome испорчен. 14px - высота каждого LI, поэтому этот трюк работает.

Мне не нужен ни один взлом браузера, если в этом нет крайней необходимости (т. Е. Сделайте смещение -14px для IE / FF и скажите 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>