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

Question

我在<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）

提前致谢。

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>

IE8、FF20、Chrome Opera 12 上的 Testet

也许这有帮助