如果“list-style-type”为“none”，Chrome会隐藏SPAN

Question

Chrome中似乎有一个错误。我想让Chrome显示这个jsFiddle，就像Firefox一样，而不改变HTML结构：

http://jsfiddle.net/qd9vcv66/

#linklist .icon {   padding-left:15px; height:13px; margin-right:3px;border:solid 2px red; }

#linklist li { margin-left:20px; list-style-type:none; }

HTML：

<div id="linklist">
<ul>
<li><a href="http://www.link1.com"><span class="icon"></span>Link 1</a></li>
<li><a href="http://www.link2.com"><span class="icon"></span>Link 2</a></li>
<li><a href="http://www.link3.com"><span class="icon"></span>Link 3</a></li>
</ul>
</div>

在Chrome中，只有“list-style-type”设置为“none”时，红色框才会消失，这对我来说非常重要。

Answer 1

评论中建议的解决方案（“display：inline-block”）很好，但是从图标中窃取了一条像素线，无法解决这个问题。

所以现在这是我的解决方案：我删除了所有那些“list-style-type：none”行，并将LI元素的颜色设置为“rgba（0,0,0,0.0）”以隐藏子弹等

IE不喜欢这样，但这没有问题，我通过一个额外的CSS表解决了这个问题，其中包含一条有条件地通过JavaScript附加的行。