在List项目中的Span在IE中看起来很奇怪

Question

我在<li>元素中定位span文本时遇到问题。 它在Mozilla和Chrome中看起来很不错，但在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）

提前致谢。

Answer 1

变化

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

到

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

这样：

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

Answer 2

我有类似的东西，对我来说很好。她是我的代码：

<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 on IE8，FF20，Chrome Opera 12

也许这有帮助