ホームページ  >  記事  >  ウェブフロントエンド  >  異なるブラウザでの CSS HACK_html/css_WEB-ITnose

異なるブラウザでの CSS HACK_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:28:451040ブラウズ

今日新しいプロジェクトに着手したので、年末までに完了する予定です。私の仕事が無事に完了することを祈っています。 CSS フレームワークを構築する過程で、ブラウザーの互換性の問題がいくつか発生しました。それでは、各ブラウザに固有の CSS ハックを数えてみましょう。

(百科事典から貼り付け)

  1. Firefox 用 CSS ハック:

    @-moz-document url-prefix() { .selector { 属性: 値 }}

  2. Web キットコアと CSS ハック用Opera ブラウザの場合:

    @media all and (min-width:0){ .selector {attribute: value;/*Webkit と Opera の場合*/ }}

  3. このスタイルからのみ Webkit を区別できます-ベースのブラウザと他のブラウザの Opera ブラウザを区別できません。そのため、上記のスタイルに基づいて別のスタイルを追加する必要があります:

    @media screen および (-webkit -min-device-pixel-ratio:0)。 ) { .selector {attribute: valueForWebKit;/*Webkit のみ*/ }}

  4. このスタイルは Webkit 用であるため、以前のスタイルはカバーされます。したがって、Webkit と Opera は次のように区別できます。これら 2 つのスタイルは、opera の属性値は value であり、webkit の属性値は valueForWebKit です。

  5. 実際、一般的に言えば、互換性の問題は IE で対処することが多いですが、Firefox や Chrome との互換性問題が発生した場合は、まず Web ページの構造が適切かどうか、および Web ページの構造が適切かどうかを確認する必要があります。付箋は標準化されているため、どうしても必要になるまで上記の CSS ハックを使用しないでください。

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