次のコードに問題があります。
#access a, #access a:visited {
line-height: 2em; //<- Chrome uses these
padding: 0 1em;
}
#access ul ul a {
line-height: 1em; //<- Firefox uses these
padding: .5em .5em .5em 1em;
}
HTML コード:
<nav role="navigation" id="access">
[...]
<div [...]>
<ul [...]>
<li [...]> [...] </li>
<li [...]> [...]
<ul class="sub-menu">
<li [...]> [...] </li>
</ul>
</li>
</ul>
</div>
</nav>
どちらのセレクターが優先度が高いですか?
#access a, #access a:visited
また
#access ul ul a <- Is supposed to have the higher priority
2 つのブラウザー (Firefox または Chrome) のいずれかが、それらを間違って解釈しているようです
簡単な修正は、2 番目のセレクターにクラス名を与えることでした。
-> #access ul ul.sub-menu a <- works for both
これがバグであると考えられる場合は、Mozilla/Google に報告します
編集: Fiddle の 2 つの写真 (Chrome で 1 つ、Firefox で 1 つ): Chrome:
ファイアフォックス: