jquery - 列表项中的跨度在IE中看起来很奇怪

我在<li>元素内放置跨度文本时遇到问题。
在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>

这是它的特技（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）



提前致谢。

最佳答案

更改

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

至

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

所以：

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