ホームページ >ウェブフロントエンド >htmlチュートリアル >異なるブラウザでの CSS HACK_html/css_WEB-ITnose
今日新しいプロジェクトに着手したので、年末までに完了する予定です。私の仕事が無事に完了することを祈っています。 CSS フレームワークを構築する過程で、ブラウザーの互換性の問題がいくつか発生しました。それでは、各ブラウザに固有の CSS ハックを数えてみましょう。
(百科事典から貼り付け)
Firefox 用 CSS ハック:
@-moz-document url-prefix() { .selector { 属性: 値 }}
Web キットコアと CSS ハック用Opera ブラウザの場合:
@media all and (min-width:0){ .selector {attribute: value;/*Webkit と Opera の場合*/ }}
このスタイルからのみ Webkit を区別できます-ベースのブラウザと他のブラウザの Opera ブラウザを区別できません。そのため、上記のスタイルに基づいて別のスタイルを追加する必要があります:
@media screen および (-webkit -min-device-pixel-ratio:0)。 ) { .selector {attribute: valueForWebKit;/*Webkit のみ*/ }}
このスタイルは Webkit 用であるため、以前のスタイルはカバーされます。したがって、Webkit と Opera は次のように区別できます。これら 2 つのスタイルは、opera の属性値は value であり、webkit の属性値は valueForWebKit です。
実際、一般的に言えば、互換性の問題は IE で対処することが多いですが、Firefox や Chrome との互換性問題が発生した場合は、まず Web ページの構造が適切かどうか、および Web ページの構造が適切かどうかを確認する必要があります。付箋は標準化されているため、どうしても必要になるまで上記の CSS ハックを使用しないでください。