クロスブラウザアクセシビリティ -すべての一般的なブラウザで表示および動作するサイトのプロパティは同じです。
ハック -文書化されていない、または正しく実装されていない別の機能を使用して、バグを修正するか、新しい機能を追加します。 （c）ラークモア
ダーティハックは、主に短期的には問題の迅速な解決策であり、内部の美しさのコードの本質を奪い、その内部構造と調和を失います。 （c）ラークモア
Internet ExplorerのCSSハック
ズーム：1：
hasLayoutを決定するためのハック
* { zoom : 1 ; }
IE6のPNG：
IE6では、cscf-ie6.cssファイル内のすべての要素に対してPNG背景画像が正しく機能するように、htcファイルiepngfix.htcが接続されています。 IE PNG Fix v1.0 RC4最新バージョンを使用。
* { behavior : url ( "css/iepngfix.htc" ); }
バイトが重要な場合、IEのフィルターを使用する例があります。
.class { background : none ; filter : progid : DXImageTransform.Microsoft.AlphaImageLoader ( src= '/images/png-image.png' , sizingMethod= 'scale' ); }
IE6からスタイルを分離する：
html>body .class { } head+body .class { } html:first-child .class { }
IE6とIE7からのスタイルの分離：
html>/**/body { }
IE6からのスタイルの分離-IE8：
*|html .class { } html:not([lang*=""]) .class { }
IEの条件付きコメント：
条件付きコメントはWindowsのIEでのみ機能します。他のブラウザでは通常のコメントであるため、簡単に使用できます。 構文は次のとおりです。
<!--[if ]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <![endif]--> <!--[if !]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <![endif]--> /* - , ! */ /* : IE – IE lt IE v – (less than) IE, v lte IE v – (less than or equal) IE, v, gte IE v – (greater than or equal) – IE, v gt IE v – (greater than) – IE, v. */
IE6、IE7、IE8の条件付きコメント：
<!--[if IE 6]> <link href= "ie6.css" rel= "stylesheet" media= "all" /> <![endif]--> /* IE6 */ <!--[if IE 7]> <link href= "ie7.css" rel= "stylesheet" media= "all" /> <![endif]--> /* IE7 */ <!--[if IE 8]> <link href= "ie8.css" rel= "stylesheet" media= "all" /> <![endif]--> /* IE8 */
ボックスモデルハック：
IEでは、要素の幅に境界線とパディングが含まれているとグリッチが発生します。 Box Modelハックはそれらを修正します。
.class { padding : 4em ; border : 1em solid red ; width : 30em; width /**/ : /**/ 25em ; } /* IE padding + border */
IEの最小幅と最大幅：
IEはこれらのCSSプロパティを理解しません。 ブロックハックは次のようになります。
.class { min-width : 500px ; width : expression ( document.body.clientWidth < 500? "500px" : "auto" ); } /* IE padding + border */
.class { min-width : 500px ; max-width : 750px ; width : expression ( document.body.clientWidth < 500? "500px" : document.body.clientWidth > 750? "750px" : "auto" ); } /* IE padding + border */
ダスティン・ディアスの最小高さハック
.class { min-height : 100% ; height : auto !important ; height : 100% ; }
シンプルなセレクター：
ブラウザごとに個別のファイルを作成する必要はありません。 メインのcssファイルで個々のcssセレクターを使用できます。
* html .class { } /* , html- , IE6 */ /* quirks-mode, IE6 IE7. */ *:first-child+html .class { } /* IE 7 (first-child) */ *+html .class { } /* IE 7 */ *:first-child+html .class { } /* IE 7 */ html>body .class { } /* IE 7 */ html>/**/body .class { } /* ( IE 7) */ /* : .class { background:red } *html .class { background:green } IE6 , IE6 - */
IE6のダーティハック：
.class { _background : #F00 ; } .class { -background : #F00 ; } .class { c\olor : #F00 ; } /* a, b, c, d, e, f */
IE7のダーティハッキング：
>body { background : #F00 ; } /* body IE7 */ html* { background : #F00 ; } /* html. IE7 */ -,.class { background : #F00 ; } .class { background : #F00 !important! ; } /* !important. IE7 */
IE8のダーティハック：
.class { background : #F00\0/ ; } /* body IE7 */
IE6およびIE7で動作するダーティハッキング：
.class { *background : #F00 ; } .class { //background : #F00 ; } .class { background : #F00 !ie ; } /* !important */
Mozila FireFoxブラウザーのCSSハック
MFFのすべてのバージョンのハック：
#class[id=class] { color : #F00 ; } @-moz-document url-prefix () { .class { color : #F00 ; } } *>.class { color : #F00 ; }
MFF 1.5以降の場合：
.class, x:-moz-any-link, x:only-child { color : #F00 ; }
MFF 2.0以降の場合：
body:empty .class { color : #F00 ; } #class[id=CLASS] { color : #F00 ; } html>/**/body .class, x:-moz-any-link { color : #F00 ; }
MFF 3.0以降の場合：
html>/**/body .class, x:-moz-any-link, x:default { color : #F00 ; }
Google ChromeブラウザーのCSSハック
body:nth-of-type(1) .class { background : #000 ; }
OperaブラウザーのCSSハック
Operaのすべてのバージョンのハック：
@media all and (-webkit-min-device-pixel-ratio:10000), not all and ( -webkit-min-device-pixel-ratio : 0 ) { .style { background : #F00 ; } }
@media all and ( min-width : 0px ) { .class { color : #F00 ; } }
Opera 6の場合：
@media all and ( min-width : 1px ) { { } .class { color : #F00 ; } }
Opera 7、8の場合：
@media all and ( min-width : 1px ) { .class { color : #F00 ; } }
Opera 9の場合：
@media all and ( width ) { .class { color : #F00 ; } }
@media all and ( min-width : 0px ) { head~body .class { color : #F00 ; } }
SafariブラウザーのCSSハック
body:first-of-type .class { color : #F00 ; } html:root*.class { color : #F00 ; } body:first-of-type .class { color : #F00 ; } body:first-of-type .class { color : #F00 ; }
@media screen and ( -webkit-min-device-pixel-ratio : 0 ) { .class { color : #F00 ; } } /* Opera Safari */