jquery - Span inside List item looks weird in IE -

i have problems positioning span text inside <li> element. looks in mozilla , chrome looks awful in ie.

can 1 please me out.

here style code:

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;  } 

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

this how buit (jquery):

        $(function () {             $.each(barcodes, function(key, value) {                 $("#barcodeslist").append("<li>" + key + "</li>");             });              deletebutton = $('<span />').addclass('deletebutton').text('delete');             $('ul#barcodeslist li').append(deletebutton); ... 

and effect (right ie, left chrome)

thanks in advance.

change

<li>ra075605345si<span class="deletebutton">delete</span></li> 

to

<li><span class="deletebutton">delete</span> ra075605345si</li> 

so:

    $('ul#barcodeslist li').prepend(deletebutton);