BLOG

IE9なのにCSS3が一部効かない例～「transform」とか

IE9は確か“モダンブラウザ”という位置づけのはずなのに、
CSSで“transform”を使った画像回転などを実践してみると、
「アレ？なんで反映されないの？」
という目にあうことがあったりします。

※通常であれば、IE9はIE10への自動アップグレードによってIE8とかよりもソッコー消えるはずですので、
素直にIE10にすれば、本記事のような対応はそもそも不必要になりますので、皆様そういたしましょう。

オイラのBMW

↑こんなカンジのやつっすね。

しかーし、IE9でなぜか傾いてくれない。どーしてだ？？
コレ、要はブラウザのバージョンを誤認識というか、正しく受け止められていないということ。

じゃあどうしようもないじゃないか、
さにあらず、
ベンダープレフィックスをつければ反映される場合があるのです。
ベンダープレフィックスは、「接頭語」ってやつで、
GoogleChromeなら-webkitとか、
FireFoxなら-moz、
とつけるおなじみのやつっすね。
で、IEの場合には、
-ms
とつけてやりましょう。

transform: rotate(-7deg);
-ms-transform: rotate(-7deg); /*←コレコレ
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);

コレで反映される場合があるので、
CSSの仕様だとかブラウザの技術的ルールが近未来により進歩するまでは、
とりあえず抑えとして指定してやりましょうや。

※しつこいようですが、IEは常に最新バージョンを使いましょうね♪

タグ:

Comments