Пробег внутри Элемент списка выглядит странно в IE

У меня проблемы с позиционированием текста интервала внутри <li> элемент. Он выглядит хорошо в Mozilla и Chrome, но выглядит ужасно в IE.Пробег внутри Элемент списка выглядит странно в IE

Может кто-нибудь, пожалуйста, помогите мне.

Вот код стиля:

ul#barcodesList > li 
{ 
    list-style: none; 
    margin-left: 20px; 
    margin-right: 20px; 
    border-collapse: separate; 
    border-left: 1px solid #2557AD; 
    border-right: 1px solid #2557AD; 
    border-bottom: 1px solid #2557AD; 
    color: #2557AD; 
    height: 20px; 
    background: #e7f0fe; 
    cursor: pointer; 
    padding-left: 12px; 
    padding-top: 6px; 
} 

ul#barcodesList > li > span 
{ 
    float: right; 
    color: #FF6A6A; 
    display:block; 
} 

ul#barcodesList > li > span:hover 
{ 
    display:block; 
    color: red; 
}

И HTML:

<ul id="barcodesList"> 
<li>00015<span class="deleteButton">Delete</span></li> 
<li>RA075605345SI<span class="deleteButton">Delete</span></li> 
<li>110002067 20130200<span class="deleteButton">Delete</span></li> 
<li>PP2013001200<span class="deleteButton">Delete</span></li> 
<li>PP2013001201<span class="deleteButton">Delete</span></li> 
<li>PP2013001202<span class="deleteButton">Delete</span></li> 
</ul>

Это как его буит (Jquery):

 $(function() { 
      $.each(barcodes, function(key, value) { 
       $("#barcodesList").append("<li>" + key + "</li>"); 
      }); 

      deleteButton = $('<span />').addClass('deleteButton').text('Delete'); 
      $('ul#barcodesList li').append(deleteButton); 
...

И эффект (справа есть IE, слева - Chrome)

enter image description here

Заранее спасибо.

источник

2013-07-19 no9

уль # barcodesList> li> пядь удалить блок –

дисплея еще дают фиксированную ширину или 'максимизаторами width'. –

Какие версии IE вы тестируете? И можете ли вы подтвердить, что это не режим совместимости или режим причудливости? – Spudley

изменение

<li>RA075605345SI<span class="deleteButton">Delete</span></li>

<li><span class="deleteButton">Delete</span> RA075605345SI</li>

так:

$('ul#barcodesList li').prepend(deleteButton);

источник

2013-07-19 11:32:31

спасибо за подсказку, но не могли бы вы помочь мне переструктурировать часть jQuery? – no9

слишком очевидно, чтобы реализовать ... thans many Wes – no9

У меня есть что-то подобное, который отлично работает для меня. она мой код:

<style type="text/css"> 

.divfab { 
float:right; 
align:right;} 
</style> 


<ul> 
<li><a href="index.php?lang=en" >Leftsided Text 1 <div class="divfab" align="right">Error 1</div></a></li> 
<li><a href="index.php?lang=en" >Leftsided Text 2 <div class="divfab" align="right">Error 2</div></a></li> 
<li><a href="index.php?lang=en" >Leftsided Text 3 <div class="divfab" align="right">Error 3</div></a></li> 
<li><a href="index.php?lang=en" >Leftsided Text 4 <div class="divfab" align="right">Error 4</div></a></li> 
</ul>

Testet на IE8, FF20, Chrome Opera 12

Maybee это помогает

источник

2013-07-19 11:35:09

Спасибо за усилие! – no9

Пробег внутри Элемент списка выглядит странно в IE

ответ

Смежные вопросы