みんなおはよう。
今日、私は次のコードに苦労しています: jsFiddle のソース
私が達成しようとしてきたのは、いくつかのcss3効果を使用して、画像の「ミラー」が元の画像を覆う一見単純な画像ロールオーバー効果です。
- Chrome 12 は画像を完全に変換します
- Firefox 5 は、画像がマウス カーソルにぶつかると変換を停止します
- IE9 - 変換はまったくありません。画像が揺れているだけです
- オペラ - チェックなし
このクロスブラウザー対応を行うにはどうすればよいですか?
みんなおはよう。
今日、私は次のコードに苦労しています: jsFiddle のソース
私が達成しようとしてきたのは、いくつかのcss3効果を使用して、画像の「ミラー」が元の画像を覆う一見単純な画像ロールオーバー効果です。
このクロスブラウザー対応を行うにはどうすればよいですか?
CanIUse.comによると、IE9 は CSS3 Transitions をサポートしていないため、IE9 で機能しないのはそのためだと思います。
この機能をサポートするブラウザーは、Firefox (v4 以降)、Chrome、Safari、Opera です。ただし、現時点では、移行をサポートするすべてのブラウザーで、移行にベンダー プレフィックスが必要であることを指摘しておく価値があります。
ベンダー プレフィックスは、次の 2 つのいずれかを意味します: 仕様がまだ確定されていないため、機能が構文で変更される可能性があるか、機能に対するブラウザー自体のサポートがまだ完全であるとは見なされていません。
Chrome は長い間トランジションをサポートしてきたので、すべてがそこで機能することは驚くことではありません。Firefox は最近追加したばかりなので、ベンダー プレフィックスが必要なため、100% の動作が保証されていない可能性があることを警告する必要があります。
Firefox 5 で希望どおりに動作するようになったと思います。http://jsfiddle.net/X2eN6/7/を参照してください