B6 - RO.BOT-Z.NET BLOG

・IE 7 のみに適用
適用したいセレクタの前に「*:first-child+html」を付加

*:first-child+html p { color:#000000; }

・!important
!important があるスタイルは、他のスタイルよりも優先される。Internet Explorer 6 以前は間違った解釈をすることを逆手に取った方法。

body { font-size: small !important;
font-size: x-small;
}

・スターハック
Windows IE 4～6、Mac IE 4～5 のみにスタイルを適用。適用したいセレクタの前に「*html」を付加。

*html p { color:#000000; }

・スター7ハック
Windows IE 5.5～6、Mac IE 5、Safari のみにスタイルを適用。適用したいセレクタの前に「html*」を付加。

html* p { color:#000000; }

・Hollyハック、バックスラッシュハック
Mac IE 5 のみにスタイルを適用。あるいは Mac IE 5 のみ除外し、適用。

/* これ以降 Mac IE 5 のみに適用される \*//*/
p { color:#000000; }
/* これ以降 Mac IE 5 以外にも適用される */
Mac IE 5のみスタイルを除外

/* これ以降 Mac IE 5 には適用されない \*/
p { color:#000000; }
/* これ以降 Mac IE 5 にも適用される */

・ハッシュハック
Windows IE 4～6、Mac IE 5、Firefox、Opera 7 のみにスタイルを適用。適用したいプロパティの前に「#」を付加。

p { #color:#000000; }

・アンダースコアハック
Windows IE 4～6 のみにスタイルを適用。適用したいセレクタの前に「_」を付加。

p { _color:#000000; }

・Caioハック
Netscape 4 のみを排除。

/* これ以降 Netscape 4 には適用されない /*/
p { color:#000000; }
/* これ以降 Netscape 4 にも適用される */

・Fabrice インバージョン
Netscape 4、Opera 4～5 のみにスタイルを適用。

/* これ以降 Netscape 4、Opera 4～5 のみに適用される /*//*/ p { color:#000000; }
/* これ以降全てのブラウザに適用される */

・xmlns 属性ハック
属性セレクタをサポートする Firefox、Mozilla、Safari、Opera のみスタイルを適用。

html[xmlns] p { color:#000000; }

・:root 疑似クラスハック
:root 疑似クラスをサポートする Firefox、Mozilla、Safari、Mac IE 5 にのみスタイルを適用。:root 疑似クラスは策定中のCSS 3.0でサポート予定。

:root p { color:#000000; }

・Safari ハック
Safari にのみスタイルを適用

p { その他のブラウザ用のスタイル }
html*p { Safari 用のスタイル }
*html p { その他のブラウザ用のスタイル }

Safari 2～

html[xmlns*=""] body:last-child p { color:#000000; }

・Safari ハック 2

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

ホームページの背景に画像を指定した場合、左上を頂点にリピートしてしまいます。
同様に、repeat-x, repeat-y でも左上を頂点にそれぞれの方向にリピートしてしまいす。
タイルパターンならいいかもしれませんが、背景画像に、縦ストライプの左右2色別け画像をセンタリングで表示したいなんて時には普通の指定では合わせようがありません。
そこで、CSSで下記の様に記述すると背景画像をセンタリンクできます。

body {

	background: url(images/back.gif) repeat-y 50% 50%;

}

CSS で <li> タグに list-style-image プロパティを使用してリストマークを画像にした場合

li {
    list-style-image: url(image.gif);
}

画像と文字がズレてしまいます。
IE だと FireFox に比べると 2 ,3 ピクセルほどさらにズレてしまいます。

このズレを直すのに、下記の様に background プロパティで画像を指定する方法に変更すると、位置を揃えて表示することができます。

li {
    padding-left: 12px;
    background: url(image.gif) no-repeat 10px 0.5em;
    list-style: none;
}

padding の値は、使用する画像に合わせて調整してみください。