Css 绝对：在firefox和webkit中显示不同后

我的网站上有一个别致的下拉菜单：（试试顶部的“关于”或“支持”菜单项）

我在webkit浏览器上有我想要的行为，但firefox没有做同样的事情

悬停时，将显示li:after元素。它有绝对的位置。li元素本身具有相对位置

在webkit中：after元素的位置相对于li，但在firefox中它的位置相对于ul标记

---

有人能在保持菜单视觉不变的情况下找到解决方法吗？

这里列出了一个可笑的问题：

基本上，这是Firefox支持在表格单元格上相对定位的问题，或者在您的情况下，将元素设置为

display:table cell。他们在该示例中提出的解决方案是在“cell”中添加一个相对定位的包装器元素

<li>
    <div style="position:relative;">
        <a href="">{..}</a>
        <ul>{...}</ul>
    </div>
</li>


{…}

也许可以在锚上试一下，而不是在li上试一下？由于动态高度，在锚上不起作用。：after需要是
高度的100%，而不是感谢Matthew，但我不想添加任何不必要的标记。我正在尽我最大的努力保持它尽可能干净…这很好，但是你需要完全重新做CSS，使你的菜单不使用
display:table cell以修复此问题。这将需要大量的工作，我不知道是否有人会花时间完全重建菜单CSS作为答案。您的解决方案看起来可能是跨浏览器工作的唯一方法：-（我无法在不使用display:table cell的情况下获得均匀的间距，因为所有内容的宽度都是动态的，并且项目的数量可能会发生变化。我恐怕无法将其与菜单中的其他css很好地结合起来。当引入div时，子菜单ul定位出错……我将其标记为正确，因为您完全正确，firefox处理表格单元格定位的方式存在问题，尽管这并不能解决我的问题（因为我制作的菜单中有其他css），但看起来firefox可能会将其行为与Webkit的行为联系起来：