CSS を処理する仕組みに関して言えば、IE には血を吐くような機能が常にありますが、現在の改良点にはまだ満足しています。
pseudo-class:hover のサポートを例に挙げます。IE7 以降では、最終的に a 以外のタグのサポートが追加されました。もちろん、このような改善は賞賛すべきですが、IE6 では、:hover による a のサポートはそれほど満足のいくものではありません。次に、IE6 以前のブラウザでのホバーの問題について簡単に説明します。
多くの人は、IE6 以前のブラウザ (以下、IE6 以降と呼びます) の :hover に関するいくつかの問題をすでに知っているかもしれません。ここでは主に、hover span{} などの問題について話したいと思います。
単純な動的な効果を追加するために、:hover を使用することがよくあります。たとえば、マウスがリンク上を通過するときにテキストの色を変更することがよくあります。のように:
はい、これはすべてのブラウザで機能します。しかし、これを次のように変更すると、
IE6 では何も起こらないことがわかります。私たちのスタイルは無効です。はい、多くの人がこの問題に遭遇し、解決したはずです。
はい、この問題を解決するには、別の a:hover{} スタイルを追加するだけで済みます。このスタイルには、ズーム、パディング、マージン、その他の属性を含めることができます。次のように:
通常の効果が復元されたのを見て、:hover の失敗の原因について考えました。ズーム、表示、パディングなどの属性を使用してそれを行うことができるので、おそらく haslayout のせいだと思いました。まあ、おそらくそうなのでしょう。しかし、テストを続けると、色、フォント サイズ、オーバーフローなど、a:hover{} にどのような属性を記述しても(xx:yyy などの存在しない属性であっても)、それを正常に戻します。
ここでテストしてみると、少しびっくりしませんか?はい、私もそうです。理由については、私にはまだ分かりませんが、もしかしたら誰かが知っているかもしれません。
a:ホバー{ズーム:1;}
a:ホバーem{color:#F00;}
マウスオーバーで色を変更します
a:ホバーem{color:#F00;}
マウスオーバーで色を変更します
a:ホバー{色:#F00;}