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

【问题标题】：Menu triangle/arrow issue (pure CSS)菜单三角形/箭头问题（纯 CSS）
【发布时间】：2011-10-02 02:19:57
【问题描述】：

我在菜单项旁边有一个三角形，使用纯 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 中有任何明显的问题吗？

【问题讨论】：

我知道问题已经得到解答，但您是否考虑过使用 Unicode 字符（U+25BC 黑色向下三角形，或 U+25BE 黑色向下小三角形）？

标签： css

【解决方案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 开发版中为我工作。

【讨论】：

【解决方案2】：

我无法重现您在 Chrome 12.0.742.112 中看到的内容。对我来说，跨度甚至没有出现在那个 CSS 和 HTML 中。但是，我尝试放置一个不间断的空间，然后我能够看到它并且它显示得很好。

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

Here 是一个比较有和没有不间断空间的小提琴。请注意，至少在 Firefox 上，方法提供了更多空间（不是双关语），所以看看你是否仍然可以让它做你想做的事。如果你不能，接下来要尝试的是为你的列表元素设置一个浮点数（请参阅this question 了解原因）。

【讨论】：