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;        
}

このソリューションは、Firefox を除く、Chrome、Opera、Safari のすべての最新バージョンで機能します。Firefoxでも修正するにはどうすればよいですか？

更新 1:

これは、それがどのように見えるかです

overflow:hiddenこの属性 FF を削除すると、セパレーターが表示されますが、適切な場所ではありません。

Answer 1

Firefox では、オーバーフローとパディングに互換性がありません。パディングのコメントを外して確認してみてください。左上の代わりに使用してみてください。