1

次のコードに問題があります。

#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:

ここに画像の説明を入力

ファイアフォックス:

ここに画像の説明を入力

4

1 に答える 1