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

Question

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

Стиль списка: внутри это испортить.

Ниже приведен код, который работает. Я переместил float в # 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>