gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:29:44 24 4
gpt4 key购买 nike

我在菜单项旁边有一个三 Angular 形,使用纯 CSS。它在 Internet Explorer 和 Firefox 中完美运行,但 Chrome 会裁剪箭头的底部。以下是该问题的一些屏幕截图:

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 中看到任何明显的问题吗?

最佳答案

尝试为您的 .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 中为我工作。

关于css - 菜单三 Angular 形/箭头问题(纯 CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6638743/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com