菜单三角/箭头问题（纯CSS）

Question

菜单项旁边有一个三角形，使用纯CSS。它可以在Internet Explorer和Firefox中完美运行，但Chrome可以完成箭头的底部。以下是该问题的一些截图：

这是我正在使用的CSS：

/*menu arrows */

.arrowsprite {
    width:0px; 
    height:0px; 
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #444444;
    font-size:0px;
    line-height:0px;
    top:-2px;
    position:relative;
}

.arrowspriteselected {
    width:0px; 
    height:0px; 
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #fff;
    font-size:0px;
    line-height:0px;
    top:-2px;
    position:relative;
}

.leftish li:hover .arrowsprite {
    border-top:5px solid #444444;
}


.leftish li:hover .arrowspriteselected {
    border-top:5px solid #444444;
}

HTML是：

<li>Wanted <span class="arrowsprite"></span></li>

有没有人在我的CSS中看到任何明显的问题？

Answer 1

尝试为您的display规则设置inline-block至.arrowsprite。见this fiddle for an example。

.arrowsprite {
    width:0px;      
    height:0px;      
    border-left:5px solid transparent;     
    border-right:5px solid transparent;     
    border-top:5px solid #444444;     
    font-size:0px;     
    line-height:0px;     
    top:-2px;     
    position:relative;
    display:inline-block;
}

它适用于Chrome 14.0.803.0 dev。

Answer 2

我无法重现您在Chrome 12.0.742.112中看到的内容。对我来说，跨度甚至没有显示CSS和HTML。然而，我尝试放入一个不间断的空间，然后我能够看到它并且显示正常。

<li>Wanted <span class="arrowsprite">&nbsp;</span></li>

Here是一个与没有不间断的空间进行比较的小提琴。请注意，在Firefox上，至少该方法提供了更多的空间（没有双关语），所以看看你是否仍然能够做到你想要的。如果你不能，那么接下来要做的就是为你的列表元素设置一个浮点数（参见this question了解原因）。