Плавающее изображение справа в пределах li от ol, текст слева, работает в Chrome, а не в IE / FF

Question

Я хотел бы иметь упорядоченный список, в котором текст находится слева, а изображение для каждого li внутри него справа от li.Итак, я переместил изображение вправо, и оно правильно разместило изображение справа, а текст слева, но в IE и FF изображение на 14 пикселей меньше, чем нужно.Chrome делает это правильно.Мне кажется, что IE и FF помещают значение float снаружи или под каждым LI, а не внутри, где оно должно быть (например, Chrome).Если я отрегулирую положение -14 пикселей (вверх) для IE и FF, для них это будет работать нормально, но тогда Chrome испортится.14 пикселей - это высота каждого 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 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 / LIs, и 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-код, вы могли бы попробовать позиционирование вместо floats.

#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 и переместил значение to перед именем.

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