CSSハック集まとめ_体験交流

May 16, 2016 pm 12:06 PM
css hack

IE ブラウザをブロックします (つまり、IE では表示されません)
*:lang(zh) select {font:12px ! important;} /*FF 専用*/
select:empty {font: 12px ! important; } /*safari で表示*/
ここで選択するのがセレクターで、状況に応じて変更できます。 2 番目の文は、MAC 上の Safari ブラウザに固有のものです。
IE7 のみ認識

* html {…}
この HACK は、IE7 専用のスタイルを作成する必要がある場合に使用できます。
IE6 以下の認識

* html {…}
ここに特に注意してください。多くの地主が IE6 用の HACK を作成しています。実際、IE5.x もこの HACK を認識します。他のブラウザでは認識されません。
html/**/ >body select {……}
この文は前の文と同じ効果があります。
IE6 のみが認識しません

select { display /*IE6 は認識しません*/:none;}
ここでの主な目的は、CSS コメントを通じて属性と値を分離することです。結腸の前に放出されます。
IE6、IE5のみ認識しません

select/**/ { display /*IE6、IE5は認識しません*/:none;}
これと上の文の違いそれはセレクターと花括弧の間に追加の CSS コメントがあります。
IE5 だけが認識しない

select/*IE5 だけが認識しない*/ { display:none;}
この文は、前の文から属性領域のコメントを削除したものです。 IE5 のみが認識しません
ボックス モデル ソリューション

selct {width:IE5.x width; voice-family:””}\””; voice-family:inherit; width:correct width;} ボックスモデルのクリア方法は!重要では扱われません。これは明確にする必要があります。
フロートをクリア

select:after {content:”.”; display:block; height:0; clear:both; Visibility:hidden;}
Firefox では、子がすべてフローティングの場合、親の高さが子全体を完全にカバーできない場合は、この HACK を使用してフローティングをクリアし、親を一度定義すると、この問題を解決できます。
切り捨て省略記号

select { -o-text-overflow:ellipsis; text-overflow:ellipsis;white-space:nowrap; overflow:hidden; }
これは長さを超えた後です。余分なテキストが自動的に切り取られ、省略記号で終わります。これは非常に優れたテクニックです。 Firefox が現在サポートしていないだけです。
Opera でのみ認識されます

@media all and (min-width: 0px){ select {……} }
Opera ブラウザ用に個別の設定を行ってください。
上記は、CSS を記述する際のいくつかの HACK です。これらは、ローカルの互換性の問題を解決するために使用されます。互換性コンテンツを分離したい場合は、次のフィルタを試してみるとよいでしょう。これらのフィルターの一部は CSS で作成され、フィルターを通じて特別なスタイルをインポートします。また、一部は HTML で作成され、条件を通じて必要なパッチ スタイルをリンクまたはインポートします。

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

@media tty {
i{content:””;/*” “*/}} @import ' ie5win .css'; /*”;}
}/* */
IE5/MAC フィルターは通常必要ありません

[クリップボードにコピー] [ - ]CODE:
/ * \*//*/
@import “ie5mac.css”;
/**/
IE の if 条件ハック

IE のみ
すべての IE が認識可能
IE 5.0 のみ
IE5.0 のみが認識可能
IE 5.0 のみ
IE5.0 および IE5.5 は認識可能
IE 6 のみ -
IE6 のみ認識可能
IE 6/
IE6 および IE6 未満の IE5.x のみ認識可能
IE 7 のみ/-
IE7 のみが認識できます
上記の内容は決して包括的ではありません。皆さんの参加を歓迎します。これらのテクニックはすべてです。今後の仕事の問い合わせに便利なようにまとめました。同時に、これらの HACK を研究してくださった方々に感謝します。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Vue におけるプレースホルダーの意味 Vue におけるプレースホルダーの意味 May 07, 2024 am 09:57 AM

Vue におけるプレースホルダーの意味

jsでのスパンの意味は何ですか jsでのスパンの意味は何ですか May 06, 2024 am 11:42 AM

jsでのスパンの意味は何ですか

jsでレムは何を意味しますか jsでレムは何を意味しますか May 06, 2024 am 11:30 AM

jsでレムは何を意味しますか

vueに画像を導入する方法 vueに画像を導入する方法 May 02, 2024 pm 10:48 PM

vueに画像を導入する方法

スパンタグの機能とは何ですか スパンタグの機能とは何ですか Apr 30, 2024 pm 01:54 PM

スパンタグの機能とは何ですか

プロンプトをjsでラップする方法 プロンプトをjsでラップする方法 May 01, 2024 am 06:24 AM

プロンプトをjsでラップする方法

ブラウザのプラグインは何語で書かれていますか? ブラウザのプラグインは何語で書かれていますか? May 08, 2024 pm 09:36 PM

ブラウザのプラグインは何語で書かれていますか?

jsのノードとは何ですか jsのノードとは何ですか May 07, 2024 pm 09:06 PM

jsのノードとは何ですか

See all articles