最新のCSS Hackまとめをクイックチェック

IE ブラウザをブロックします (つまり、IE では表示されません)

*:lang(zh) select {font:12px !重要;} /*FF 専用*/
select:empty {font:12px !重要;} /*safari が表示されます*/

ここでの select はセレクターであり、状況に応じて変更できます。 2 番目の文は、MAC 上の Safari ブラウザに固有のものです。

IE7でのみ認識される

*+html {…}

この HACK は、IE7 専用のスタイルを作成する必要がある場合に使用できます。

IE6以下の識別

* html {…}

この点には特に注意してください。これは IE6 用の HACK であると書いています。実際には、IE5.x もこの HACK を認識します。他のブラウザでは認識されません。

html/**/ >本文選択 {……}

この文は前の文と同じ効果があります。

IE6だけ認識しない

select { 表示 /*IE6 は認識しません*/:none;}

ここで重要なことは、コロンの前に解放される CSS コメントを通じて属性と値を分離することです。

IE6とIE5のみ認識されない

select/**/ { display /*IE6、IE5 では認識されません*/:none;}

上記の文との違いは、セレクターと中括弧の間に追加の CSS コメントがあることです。

IE5だけ認識しない

select/*IE5 は認識しません*/ { display:none;}

この文は、前の文から属性領域のコメントを削除したものです。 IE5だけ認識しない

ボックスモデルソリューション

選択 {幅:IE5.x 幅; 音声ファミリー:""}"";

ボックス モデルのクリア メソッドは、! important では処理されません。これは明確にする必要があります。

クリアフロート

選択: 後 {コンテンツ: "."; クリア: 両方;

Firefox では、すべての子がフローティングの場合、親の高さが子全体を完全にカバーできない場合、この HACK を使用してフローティングをクリアして親を定義すると、この問題は解決されます。

省略記号の切り詰め

選択 { -o-text-overflow:ellipsis; ホワイトスペース:nowrap; }

これは、長さを超えた余分なテキストを自動的に切り取り、省略記号で終了する非常に優れたテクニックです。 Firefox が現在サポートしていないだけです。

Opera のみが認識

@media all and (min-width: 0px){ select {……} }

Operaブラウザについては別途設定を行ってください。

上記は、CSS を作成する際のいくつかの HACK です。これらは、ローカルの互換性の問題を解決するために使用されます。互換性のあるコンテンツを分離したい場合は、次のフィルターを試してみるとよいでしょう。これらのフィルターの一部は CSS で作成され、フィルターを通じて特別なスタイルをインポートします。また、一部は HTML で作成され、条件を通じて必要なパッチ スタイルをリンクまたはインポートします。

IE5.x 用のフィルター。IE5.x のみが表示されます

IE5/MAC フィルターは通常は必要ありません

IE の if 条件付きハック

<!--[if IE]> IE のみ <![endif]-->

すべての IE が認識します

<!--[IE 5.0の場合]> IE 5.0のみ <![endif]-->

IE5.0のみ認識可能

<!--[if gt IE 5.0]> IE 5.0 以降のみ <![endif]-->

IE5.0はIE5.5でも認識可能

<!--[if lt IE 6]> IE 6 のみ - <![endif]-->

IE6のみで認識される

<!--[if gte IE 6]> IE 6/+ のみ <![endif]-->

IE6およびIE6未満のIE5.xで認識可能

<!--[if lte IE 7]> IE 7 のみ/- <![endif]-->

IE7でのみ認識される

上記の内容は包括的ではない可能性がありますので、今後の作業の参考にするために、これらのテクニックの要約に参加していただければ幸いです。同時に、これらの HACK を研究した著者に感謝します。