2016-04-12 12 views
3

IE11のボタンのデフォルトのスタイリングにはホバー効果が含まれています。ボタンはホバーオンシアンでハイライト表示されます(正確な効果はテーマに依存することがあります)。しかし、擬似クラス:hoverを使用して一見無関係のCSSルールを追加すると、ボタンのホバーの強調表示が中断され、クリックすると奇妙な動作が発生します(ホバーの強調表示が適用され、CSS:hover breaks IE11のボタンスタイリング

私が期待どおりに動作だけで、次のHTML、と、JSFiddleで簡単なテストケースを持っている:

<div> 
    <button>Prev</button> 
    <button>Next</button> 
</div> 

「前のページ」ボタンの上にホバリング時にこれは次のようになります。

IE11 button hover effect

https://jsfiddle.net/qtsfokmy/

私は、次のCSSルールを追加した場合(使用されているものを、クラス名は重要で、またはそれならばありません空であるか、実際に何かをしている)、ホバー上でボタンは強調表示されませんが、ボタンをクリックするとホバー効果が止まってしまいます。ボタンは)まだクリックした後で推移しない場合は強調表示されています:

.AnythingYouWant:hover {} 

https://jsfiddle.net/vwhurLy4/

私のPCの詳細は以下のとおりです。Windows 7の64ビットSP1、IE11 11.0.9600.18230、Aeroテーマ

私がやっていますCSSを使ってこれを引き起こす何かが無効か、これは単なる奇妙なIE11バグですか?これを修正する方法はありますか? FirefoxとChromeは、:hover CSSルールでは悩まされていないようです。

+0

は、IE11で私のために働くようですそれを体験するために使用された実際のコードを共有しますか? – TylerH

+0

FYIこれはエアロのテーマがある場合にのみ発生します。基本的なテーマでは起こりません(Windows 10ではないと思われます)。テーマを切り替えるまで、私はそれを再現できませんでした。 –

+0

それは間違いなくバグです。私はそれを提出するだろう。 –

答えて

2

デフォルトのホバースタイリングをボタンに再適用する方法があるのだろうと思っていましたが、それほど遠くに行く必要はないようです。空でないbutton:hoverルールがデフォルトのスタイルを修正しているようです(空のルールで問題を修正していません)。このルールは、実際には何も変更はなく、IE11のデフォルトのホバー効果を復元しません:

.AnythingYouWant:hover {} 
button:hover { 
    font-weight: normal; 
} 

私が使用するより良い「何もしない」CSSルールがあるかどうかわかりません。ここでは、アクションに「修正」を示すフィドルです:https://jsfiddle.net/vwhurLy4/1/あなたが持っているものの問題を明確することができ、そして:

https://jsfiddle.net/xkf5fbLd/

+0

うん、私はIEのv11.0.9600.18204 Win7の究極のSP1 64ビット上で、Aeroの上で動作します。 – TylerH