opacityを全ブラウザに対応させるcss

透明度を設定するopacityに対応していないIE7、IE8などの古いブラウザも表示させるcssです。

＊下記で全ブラウザ対応です。
ターゲットブラウザでない部分は除いてください。

#box {
filter:alpha(opacity=80); /* IE 6,7*/
-ms-filter: "alpha(opacity=80)"; /* IE 8,9 */
-moz-opacity:0.8; /* FF , Netscape */
-khtml-opacity: 0.8; /* Safari 1.x */
opacity:0.8;
zoom:1; /*IE*/
}

＊「zoom:1;」を入れないとIEで表示できない場合があります。
opacityを適応する為に、「zoom:1;」を入れると
currentStyle.hasLayoutがFalseになり、widthやheigthなどの位置情報をあたえられるので解決します。

IE9はopacityとfilter両方適応される

IE9にopacityとfilterの両方が設定されてしまうので、
IE9にfilterがかからないように↓こちらも記載します。

#box:not(:target){
	filter: none\9;
	-ms-filter: none\9;
}

＊「:not(:target)」と「\9」セットでIE9のみ設定されます。

＊opacityは子要素も含めて指定したセレクタを透過させます。
＊子要素は透過したくない場合はbackgroundに「rgba」で透明度を設定します。
（詳しくはこちらの記事で）

---

【関連記事】
▼マウスオーバー（hover）で画像または要素を半透明にする
http://d.hatena.ne.jp/soratomo0714/20160216/

▼IE8以下でもrgbaを使って、マウスオーバー時に文字（子要素）はそのままで背景のみを透明にする
http://d.hatena.ne.jp/soratomo0714/20160219/