Html CSS菜单中的箭头在浮动时未正确对齐

我创建了一种菜单

使用的CSS类如下所示

#主导航{
填充：3px0px 3px0px；
z指数：300！重要；
}
#主导航{
列表样式：无；
位置：相对位置；
浮动：左；
保证金：0；
填充：0；
背景：#888；
z指数：300！重要；
最小宽度：150px；
空白：nowrap；
}
#主导航ul a{
显示：块；
文字装饰：无；
字体大小：12px；
线高：32px；
填充：0 15px；
颜色：#fff；
字体系列：“Helvetica Neue”，Helvetica，Arial，Verdana，无衬线；
}
#主导航ulli{
位置：相对位置；
浮动：左；
保证金：0；
填充：0；
}
#主导航ul li.current菜单项{
背景：ddd；
}
#主导航：悬停{
背景：#008000；
}
#主导航ul{
显示：无；
位置：绝对位置；
最高：100%；
左：0；
背景：#888；
填充：0；
}
#主导航系统{
浮动：无；
空白：nowrap；
宽度：100%；
}
#主导航{
线高：120%；
填充：10px 15px；
}
#主导航{
排名：0；
左：100%；
}
#主导航ul li：悬停>ul{
显示：块；
}
#主导航>ul>li{
显示：内联块；
浮动：无；
利润率：0-3px0；
}
.menu li:类型{右边框：无；}的最后一个
.menu li>a:after{float:right；margin left:5px；content:'\25BA'；}
.menu>li>a:after{float:right；margin left:5px；content:'\25BC'；}
.menu li>a.only-child:在{左边距：0；内容：“”；}

HTML代码：

$（文档）.ready（函数（）{
$（“a:独生子女”）.addClass（“独生子女”）；
});

除了以下CSS类中的

float:right

之外，它工作正常

.menu li>a:after{float:右；margin left:5px；content:'\25BA'；}
.menu>li>a:after{float:right；margin left:5px；content:'\25BC'；}

float：右用于在菜单右侧浮动相应的箭头。但是，它不允许菜单文本和箭头正确内联

这种差异在FireFox上显而易见


这张照片来自FireFox（31.0）。箭头未与文本正确对齐。在谷歌浏览器（36.0.1985.143m）和Internet Explorer（8）上，菜单看起来不错

如何使箭头向右对齐并正确对齐？
它看起来不像是您需要使用的设置
float:right

position: absolute; 
right: 0px;

如图所示
您是否尝试添加
display:table单元格display:table cell，没有观察到任何差异
内容：►";代码>位置：绝对值；<代码> >代码：右：0px；< /COD>并删除<代码>空白：NoRAP；< /COD>这似乎有帮助。我已经尝试过<代码>右：0 < /代码>但我总是忘记考虑<代码>位置< /> >：