css - 绝对 :after displaying differently in firefox and webkit

Question

我的网站上有一个精美的下拉菜单:http://www.blueleafstudio.net/environmentally-friendly-web-hosting/ (尝试顶部的“关于”或“支持”菜单项)

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

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

在 webkit 中，:after 元素的位置是相对于 li 的，但在 firefox 中它的位置是相对于 ul 标签的。

有谁能在保持菜单视觉效果不变的情况下解决这个问题？

Answer 1

此处列出了一个类似的问题:Does Firefox support position: relative on table elements?

基本上，这是 Firefox 支持表格单元格相对定位的问题，或者在您的情况下和元素设置为 display:table-cell;。他们在该示例中提出的解决方案是在“单元格”内添加相对定位的包装元素。

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