IE11にてボタンのデフォルトのhoverスタイルがあたらない場合がある。

Question

IE11にて、作成したボタンに、
hover時のブラウザのデフォルトのスタイルが適用されない場合があります。

DOMの構造が間違っているのでしょうか？
分からないなりにいろいろ検証してみたのですが。。

<!-- この組み方だと正しくスタイルが適用されました。 -->
  <nav>
    <button type="button">ボタン</button>
    <input type="button" value="ボタン"/>
  </nav>

<!-- こちらは適用されず、クリック時のスタイルしか適用されませんでした。 -->
  <footer>
    <button type="button">ボタン</button>
    <input type="button" value="ボタン"/>
  </footer>

ただ、単純にbodyの中に書いただけのボタンのスタイルが適用されなかったり、
APIとして公開されているホームページのボタンにもスタイルが適用されなかったりもしたので、こちらの環境の問題かな、とも思っています。
もしくはブラウザ側のバグでしょうか？

もし似たような経験をされた方いらっしゃいましたら、アドバイスいただきたいです。

Answer 1

意図したスタイルが適用されていない原因は、スタイル名やclassの指定が間違っている、あるいは別のスタイルで上書きされてしまっているなど考えらえますので、まずはどんなスタイルが適用されているのかを確認するのが良いと思います。

<footer>の中の<button>をマウスで右クリックし、コンテキストメニューで「要素の検査(L)」を選択すると、F12開発者ツールの画面が開きます。 <button>に現在適用されているCSSスタイルがF12開発者ツール画面の右側に一覧表示されますので、まずはそちらを確認してみるというのはいかがでしょうか。

ご参考まで。