検索

CSSハック集まとめ

Dec 24, 2016 pm 03:33 PM

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

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

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

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

select/**/ { 表示 /*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;}
子がすべてフローティングになっている場合、親の高さ子全体を完全にラップすることは不可能です。その後、このフローティング HACK を使用して親を 1 回定義すると、この問題は解決できます。
切り捨て省略記号

select { -o-text-overflow:ellipsis; text-overflow: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 のみ
[endif]–>
IE5.0 のみが認識可能
IE5.0 は IE5.5 を置き換えることが保証されています。認識可能
IE 6 のみ認識可能
6/+
IE6 および IE6 より前の IE5.x は
IE 7/- IE7 でのみ認識されます
上記の内容は決して包括的なものではありません。将来の仕事の問い合わせに役立つように、これらのテクニックをまとめていただけると幸いです



その他の CSS Hack コレクションと関連記事については、PHP 中国語 Web サイトに注目してください

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

最近の会議の講演で(申し訳ありませんが、どちらを忘れてしまいます)、サードパーティのウィジェットの形でWebパフォーマンスが低いという簡単な例がありました。例

WebPagetestでのパフォーマンステストのシングルページアプリケーションのレシピWebPagetestでのパフォーマンステストのシングルページアプリケーションのレシピApr 15, 2025 am 09:42 AM

WebPageTestは、開発者がWebサイトのパフォーマンスを監査するのに役立つオンラインツールであり、オープンソースプロジェクトです。のウェブパフォーマンスエバンジェリストとして

ウィンドウのサイズ変更中にアニメーションを停止しますウィンドウのサイズ変更中にアニメーションを停止しますApr 15, 2025 am 09:40 AM

あらゆる種類の要素に関するトランジションとアニメーションが多数あるページがあるとします。それらのいくつかは、ウィンドウがサイズ変更されたときにトリガーされます

1つの要素を別の要素の上と下に織ります1つの要素を別の要素の上と下に織りますApr 15, 2025 am 09:38 AM

この投稿では、CSS超大国を使用して、2つの要素が重複して織り込む視覚効果を作成します。このデザインのエピファニーが来ました

CSSに乱数はありますか?CSSに乱数はありますか?Apr 15, 2025 am 09:37 AM

CSSを使用すると、Web上に動的なレイアウトとインターフェイスを作成できますが、言語としては静的です。値が設定されると、変更できません。のアイデア

段落の中央にフロート要素段落の中央にフロート要素Apr 15, 2025 am 09:36 AM

画像(またはその他の要素)が視覚的に浮かんで、テキストの段落に視覚的に浮かんでいるとします。しかし、ように...段落の途中で、

'は、派手ではあるが、複雑でないページローダーを作りましょう'は、派手ではあるが、複雑でないページローダーを作りましょうApr 15, 2025 am 09:33 AM

特にプログレッシブWebアプリやリアクティブサイトが増加しているため、最近のサイトでロード状態を見るのはかなり一般的です。それは一つの方法です

クロスプラットフォームアプリ開発のランドスケープクロスプラットフォームアプリ開発のランドスケープApr 15, 2025 am 09:29 AM

私はこのようなものをあまりうまく追跡しませんが、私はそれを手に入れます。 AndroidとiOS用のネイティブアプリが必要な場合は、むしろ1回だけ書く必要があると思います

See all articles

ホット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ヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール