我在<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)
提前致谢。