ブラウザ毎のCSS対処方法(4)-CSSハック
将来、ハックが使えない可能性もありますが、正規CSSの下にCSSハックを記述しておくと、
メンテナンスが楽になります。
以下の個別に指定できるCSSハックも含めて、ブラウザ毎のCSS対処方法(1)?(4)まで、色々な組み合わせでブラウザ別に対応することができます。
- スターハック
-
対応ブラウザ：IE4-6,Mac4-5
* html{} - アンダースコアハック
対応ブラウザ：IE4-6のみ
html{ _font-size:10pt;}- IE7ハック
対応ブラウザ：IE7のみ
- IE5、IE4にも適用される
*+html{} - 現在の主流
*:first-child+html{}
- IE5、IE4にも適用される
- スター7ハック
-
対応ブラウザ：IE5.5-6、Mac5、Safari
html*div{} - Hollyハック
-
対応ブラウザ：Mac Msc5のみ適用
/* これ以降Mac IE 5のみに適用される \*//*/
div { font-size:10pt; }
/* これ以降Mac IE 5以外にも適用される */
対応ブラウザ：Mac IE 5のみにスタイルを除外
/* これ以降Mac IE 5のみに適用される \*/
div { font-size:10pt; }
/* これ以降Mac IE 5以外にも適用される */
- ハッシュハック
-
対応ブラウザ：IE4-6,Mac IE5、Firefox,Opera7のみ適用
div { #color:#FF0000; } - xmlns属性ハック
-
対応ブラウザ：Firefox,Mozilla,Safari,Operaのみ適用
html[xmlns] p { color:#FF0000; } - :root疑似クラスハック
-
対応ブラウザ：Firefox、Mozilla、Safari、Operaにのみ適用。
:root p { color:#FF0000; } - Safariハック
-
対応ブラウザ：Safariのみ
p { その他のブラウザ用のスタイル }
html*p { Safari用のスタイル }
* html p { その他のブラウザ用のスタイル }対応ブラウザ：Safari2からのみ
html[xmlns*=""] body:last-child p { color:#FF0000; } - 対応ブラウザ：モダンブラウザ
-
対応ブラウザ：モダンブラウザのみ適用(IE7を除く)
-
html>/**/body{} - Safariのみ適用
対応ブラウザ：Safariのみ
html:\66irst-child body{font-size:10pt;}- clearfix
-
div:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
div {
display: inline-block;
}
div {
zoom: 100%;
}
ブラウザ別ＣＳＳ対策
CSSバグに対応する方法は、以下のリンクから御覧ください
Loading ...
