html - 跨浏览器后通过css插入图像

Question

我目前正在尝试通过 css :after 属性在菜单的 li 元素之间插入一些分隔符图像:

nav ul li:after
{
    content: url('../Content/Images/BorderSeparator.png');
    display: block;
    height: 30px;        
    padding:10px 0px 10px 0px;
    overflow: hidden;        
}

此解决方案适用于所有最新版本的 Chrome、Opera、Safari，Firefox 除外。 我怎样才能同时为 Firefox 修复它？

更新 1:

应该是这样的

问题在某种程度上与 overflow:hidden 有关，当我删除此属性时 FF 显示分隔符，但不在正确的位置。

Answer 1

在 Firefox 中，溢出和填充不兼容，尝试取消注释填充以验证。尝试使用左上角。