一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

IE8対応でやったことメモ

いきなりですが、

僕は現在、仕事でIE8の対応を迫られ、地獄のような日々を過ごしています。。

そこで今回は、その対応で行ったことを備忘録として残そうと思います。

ちなみにIE9,10も対象ブラウザですが、8が比じゃないぐらいうざいのでピンポイントで8に焦点をあわせています。


今回、解決した問題は大きくわけて3つありました。
(ちなみに現時点で問題はまだ2,3個残っていますww)


1、headerやnavなど、HTML5のタグを結構使っていたのでその界隈が全滅した。

これに関しては結構有名な対策があるみたいで、html5shiv.jsというものを導入することで解決しました!!


html5shiv.jsダウンロード


最近、html5.jsからhtmlshiv.jsに変わったみたいですね。


使い方は、
ダウンロードしたhtml5shiv.jsを適したフォルダに入れておいて、headの中で読み込んでやればOK!

<!--[if lt IE 9]>
<script src="../static/js/html5shiv.js"></script>
<![endif]-->


こいつを導入する事で、IE9以下のブラウザにおいてもHTML5のタグを使えるようになりました!!


2、:nth-child系の擬似クラスやmin-width,max-width系のセレクタなどが全滅した。

これも結構有名なやり方があるみたいで、ie9.jsというものを導入して解決しました。


ie9.jsダウンロード


先ほどと同様のやり方でheadの中で読み込むだけでOKでした!

<!--[if lt IE 9]>
<script src="../static/js/ie9.js"></script>
<![endif]-->


これで崩壊していたページもだいぶまともになってきました!!


でもまだバグはたくさんのこっておる。


続きまして。。。


3、rgbaが効かねえ。

これは無駄にめっちゃハマりました。


解決方法としては普通にIEのfilterプロパティを使用したのですが、使い慣れてない+めっちゃわかりにくいせいでかなり苦労してしまいました…

以下のような具合に書けばIEでもrgbaを表現できるようです!!

background:rgba(0,0,0,0.7);

/* IE用 */
-ms-filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr=#dd000000,EndColorStr=#dd000000);

filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr=#dd000000,EndColorStr=#dd000000);

zoom:1;


まあちょっと長いだけで終わってみたら全く難しいことではないのですが、やっかいだったのは色指定している部分がよくみたら6桁ではなく8桁だということ!!


最初のddの部分はrgbaのaの部分、透明度を指定するんですね。しかも16進数で。


僕ははじめ特に何も考えずに10進数から16進数に変えれば良いのねーと通常の色指定のノリで、75%にしたいから4bだなーって具合で適用したんです。


でも全然透過の黒色にならない…


命令の書き方がわるいんじゃないか?、position:absoluteとかが悪さしてんじゃないか?、

などありとあらゆる原因を探ってもなかなかわからない。


そこで黒じゃなくて、青とかでやってみようと色をいじくっていたときに気づいたんです!!


微妙に効いてるやんけww


それでやっっとわかりました!!この透明度の指定の仕方を勘違いしていたんですね!


よくみたら00(透明)〜ff(不透明)って書いており、普通に10進数を16進数に直すだけじゃだめじゃねえか!!っていう基本事項にようやく気づきましたw

ffは255ではなく100に該当するんだと。


それで再計算等をした結果、ddあたりがいい感じだったので#dd000000として適用したら、なんとか解決できました!


ちなみにfilter:~みたいなくそ長い命令を毎度書いてられないので、Sassの登場!
_mixin.scssに

@mixin ie_rgba($rgba_val){
    $color : "#"+$rgba_val;
    -ms-filter:progid:DXImageTransform.Microsoft.Gradient
    (GradientType=0,StartColorStr=#{$color},EndColorStr=#{$color});

    filter:progid:DXImageTransform.Microsoft.Gradient
    (GradientType=0,StartColorStr=#{$color},EndColorStr=#{$color});

    zoom:1;
}

を書いておき、

あとは適用したい箇所に

@include ie_rgba(dd000000);

とすればOK!

#dd000000を引数に渡すと色は3桁か6桁で渡しなさい的なエラーがでたので、こうやりました。


まだ完全に直ってないので僕の地獄はまだまだ続くのですが、引き続き何かとんでもなくハマったりしたことがあればまたブログに書きたいと思います。


がんばろー


小さな事からコツコツと。