範圍內列表項在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>

這是它的BUIT（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

UL＃barcodesList> LI>跨度去除顯示塊 –

別人給固定的寬度或'MAX- 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

太明顯了實現...太多了Wes – no9

我有類似的東西，這對我來說工作正常。她是我的代碼：IE8的，FF20，鉻歌劇

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

梅比這有助於

來源

2013-07-19 11:35:09

感謝您的努力利益主！ – no9

範圍內列表項在IE中看起來很奇怪

回答

相關問題