Wazap! Blog - ワザップ!ブログ

●hover時にalphaをきかせる
■filter:alphaを使う。

alphaImage a:hover{
zoom: 1;
filter:alpha(opacity=65);
-moz-opacity:0.65; //mozira
opacity:0.65; //IE
}

●IE6.7でmax-widthをきかせる
■Javascriptのexpressionプロパティを使う。

* html #maxWidth {
width:expression(document.body.clientWidth > 1200? “1200px” : “auto”);
}

●IE6で背景にPNGファイルを使う
■_filterを使う。

filter{
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src=’imagePath.png’);
_background-image: none;
}

●CSS hack(ハック)について

/* affect to only MacIE5 \*//*/
div.globalContainer{
margin: 0 0 0 1px;
}
/* end */

ポイント
/* XXX \*//*/をつける事でMacIE5のみCSSが適用されます。

/* except MacIE5 \*/
margin:1px 0 0;
/* end */

ポイント
/* XXX \*/をつける事でMacIE5以外のブラウザでCSSが適用されます。

safari用のCSS hack

/* safari only \*/
html:\66irst-child div.globalContainer{
margin: 0 0 0 18px;
}
/* end */

ポイント
/* XXX \*/でコメントアウトし、html:\66irst-childをつける事で、
safariのみCSSが適用されます。

IE6.0,IE7.0のCSS hack

_div.globalContainer{
margin:0;
}
*div.globalContainer{
margin:0;
}
/* end */

ポイント
定義要素を記述する前に_を付けるとIE6.0のみに、
*をつけるとIE7.0のみCSSが適用されます。