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

我在菜单项旁边有一个三角形，使用纯CSS。它可以在Internet Explorer和Firefox中完美地工作，但Chrome会收获箭头的底部。这里的问题的一些截图：菜单三角形/箭头问题（纯CSS）

Screenshot of menu in Firefox
Screenshot of menu in Chrome
Screenshot of menu in Internet Explorer 9

下面是我使用的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？

来源

2011-07-10 422

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

尝试设置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中适用于我。

来源

2011-07-10 03:07:38

多数民众赞成在完美！欢呼Zack – 422

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

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

Here的小提琴与和没有非换空间进行比较。请注意，在Firefox上，至少方法会提供更多空间（没有双关语意图），因此请参阅您是否仍然可以按照自己的意愿进行操作。如果你不能，接下来要尝试的是你的列表元素的浮动（请参阅this question为什么）。

来源

2011-07-10 02:52:33 Briguy37

谢谢@ Briguy37 :) – 422

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

回答

相关问题