Css Firefox未按预期与right:对齐

所以我又买了一套导航药丸，但我注意到了另一个奇怪的问题。我使用right:5px将“通知”对齐到移动视图中我想要的位置，该位置小于767px。在chrome中看起来很棒，在IE中看起来很棒，但在firefox中，两个“通知”范围都位于彼此的顶部，完全脱离了LI的位置。你知道为什么Firefox会有这种奇怪的行为吗

HTML

JS-Bin与示例

---

这是因为您的

li

是

display:table cell！重要的

如果您可以稍微更改标记，将
.notification
放在链接中，就可以了

<li><a href="#">Item 1 Title<span class="notification">4</span></a></li>



并给
#contentfirst菜单一个
a
位置：相对

在jsbin上，我在注释中添加了我的名字，注释中的
位置：relative

jsbin:
我认为Firefox对表格单元格显示的理解有问题

#contentFirstMenu > li {
...
  display: table-cell !important;
...
}

尝试将此更改为：

  display: inline-block !important;

我认为FireFox在“CSS表”的结构上有点挑剔，而且你似乎没有一个表行，因此作为一个替代方案，没有经过测试，你可以尝试将你的
包装在
中，给它一个display:table，给你的
一个
display:table行

希望这有帮助。
在firefox v20.0.1中工作正常。很抱歉花了这么长时间，这是正确的答案。谢谢
#contentFirstMenu > li {
...
  display: table-cell !important;
...
}

  display: inline-block !important;