css - 菜单三 Angular 形/箭头问题(纯 CSS)

Question

我在菜单项旁边有一个三 Angular 形，使用纯 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

尝试为您的 .arrowsprite 规则将 display 设置为 inline-block。参见 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 中为我工作。