2

最初は非表示になっている子コンテナを持つ要素があります。親にカーソルを合わせると、子が表示されます。単純。

さて、実際のブラウザーでは、CSS3に準拠していないブラウザーの基本的な機能を維持しながら、フレアを追加して子をフェードインさせたいと思います。古いブラウザの場合は、単に切り替えるだけですが、クールなブラウザを使用してすべての子供向けdisplayにアニメーションを作成します。opacity簡単な操作でしょ？

私の大きな驚きと失望には、これは一種のバグです。

Firefoxでは、カーソルを合わせると、子要素が完全に不透明に切り替わり、フェードアウトします。しかしねえ、私はそれを完全に透明なものから始めて、それからフェードインしたいです！

Webkitでは、アニメーションはトリガーされず、displayトグルのみがトリガーされます。

IE（IE10 PPを含む）では、単純に切り替わります（displayIE10でアニメーション化されることを期待していましたが、予想どおり）。

Operaではすべてがうまく機能します。<3 <3

display:none;さて、最初の宣言からを削除すると、アニメーションはFxで美しく機能しますが、この特定のプロジェクトの訪問者の間で悲しいことに支配的な、クールでないブラウザーで問題が発生します。

私はModernizrの力を持っているので、条件付きのスタイルを作成しdisplayて、ばかげたブラウザーでのみトグルを使用できるようにすることができます。人生は再び素晴らしいですが、疑問は残ります。

これはFx/Webkitzのバグですか、それとも意図的なものですか？

これがあなたが見るためのフィドルです：http：//jsfiddle.net/TheNix/q5bAZ/4/

4

2 に答える 2

4

問題は、遷移が計算された値の変更で発生し、ブラウザが が設定されている場合、ほとんどのプロパティの値を計算しないことですdisplay: none。

これについて仕様が何を言うべきかについて、いくつかの...活発な議論があります。http://lists.w3.org/Archives/Public/www-style/2011Dec/0353.htmlから始まり、過去 4 か月ほどのスレッドを参照してください。

于 2012-05-25T17:16:15.883 に答える
0

宣言を省略してdisplay追加するだけです

-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=x); // x =  0 ... 100.

IEやその他の古いブラウザをターゲットにすれば、問題はないはずです。

非常に正確にしたい場合は、フィルターを追加のIEスタイルシートに入れて、愚かなIEのものでスタイルシートを無効にしないようにします。（ただし、独自のプレフィックスではxDのみ）

于 2012-05-25T10:11:04.437 に答える