私が行った設計では、垂直にする必要がある要素があります。 IE9を除くすべてのブラウザーで動作するためのCSSを持っています。 IE7およびIE8のフィルターを使用しました。
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
しかし、これはIE9で私の要素を透明にしているようで、CSS3の「変換」porpertyは何もしないようです!
とにかくIE9の要素を回転させることを知っていますか?
本当に助かります!
W.
標準のCSS3ローテートはIE9で機能するはずですが、次のようにベンダープレフィックスを付ける必要があると思います。
-ms-transform: rotate(10deg);
ベータ版では動作しない可能性があります。そうでない場合は、ベータ版よりも新しいリビジョンである現在のプレビューバージョン(プレビュー7)をダウンロードしてみてください。テストするベータ版がないため、そのバージョンであったかどうかを確認できません。最終リリースバージョンは、確実にサポートする予定です。
IE固有のfilter
プロパティがIE9で削除されたことも確認できます。
[編集]
人々はさらなるドキュメントを求めています。彼らが言うように、これはかなり限られていますが、私はこのページを見つけました: http://css3please.com/ これはすべてのブラウザでさまざまなCSS3機能をテストするのに役立ちます。
しかし、IE9プレビューでこのページの回転機能をテストすると、かなり見事にクラッシュしました。
ただし、IE9の-ms-transform:rotate()
を使用して独自のテストページでいくつかの独立したテストを実行し、正常に機能しています。私の結論は、この機能は実装されていますが、いくつかのバグがあり、おそらく動的に設定することに関連しているということです。
どのブラウザにどの機能が実装されているかについてのもう1つの有用な参照ポイントはwww.canIuse.comです- http://caniuse.com/#search=rotation を参照してください
[編集]
質問に関連し、物事を容易にする可能性のある CSS Sandpaper と呼ばれるハックについて最近発見したため、この古い答えを復活させました。
このハックは、IEの古いバージョンの標準CSS transform
のサポートを実装しています。したがって、CSSに次を追加できます。
-sand-transform: rotate(10deg);
... IE 6/7/8で、filter
構文を使用せずに動作するようにします。 (もちろん、舞台裏でフィルター構文を使用していますが、他のブラウザーと同様の構文を使用しているため、管理がはるかに簡単になります)
これを試して
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 50px;
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
}
.rotate {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-sand-transform: rotate(10deg);
display: block;
position: fixed;
}
</style>
</head>
<body>
<div class="rotate">Alpesh</div>
</body>
</html>
IE9の変換にも問題があり、-ms-transform: rotate(10deg)
を使用しましたが、機能しませんでした。できることはすべて試してみましたが、問題はブラウザーモードにありました。変換を機能させるには、互換モードを「標準IE9」に設定する必要があります。
私はこれが古いことを知っていますが、私はこの同じ問題を抱えていて、この投稿を見つけました、そしてそれは何が間違っていたかを正確に説明しませんでしたが、正しい答えを助けてくれました-したがって、私の答えは私と同様の問題。
垂直に回転させたい要素があったので、当然IE8の場合はフィルターを追加し、IE9の場合は-ms-transformプロパティを追加しました。私が見つけたのは、-ms-transformプロパティと同じ要素にフィルターを適用すると、IE9がその要素を非常にうまくレンダリングしないということです。私の解決策:
Transform-Originプロパティを使用している場合は、MS用にも追加します(-ms-transform-Origin:左下;)。要素が表示されない場合は、要素が中央の軸を中心に回転しているため、何らかの理由でページから離れている可能性があります。
IE7&8のfilter:プロパティを別のスタイルシートに移動し、IE条件を使用してIE9未満のブラウザーにそのスタイルシートを挿入します。この方法では、IE9スタイルには影響せず、すべて正常に動作するはずです。
正しいDOCTYPEタグも使用するようにしてください。間違っているとIE9は正常に動作しません。