CSS互換性に対処するにはどのような方法がありますか?

css 互換性処理方法には次のものが含まれます: 1. スタイルを初期化する; 2. ブラウザーのプライベート属性を追加する ([-moz] は Firefox ブラウザーのプライベート属性を表す); 3. 自動化されたプラグインを使用する (自動管理など) Autoprefixer をプレフィックスするためのブラウジング プラグイン。

処理方法:

1. スタイルの初期化

(学習ビデオの推奨: css ビデオチュートリアル)

各ブラウザのデフォルトの CSS スタイルは異なるため、最も簡単で効果的な方法は初期化することです

* { 
  margin: 0; 
  padding: 0; 
}

何を初期化すればよいかわからない場合は、初期化をお勧めしますCSS スタイル ライブラリnormalize.css で、次のようにいくつかのスタイル設定を選択して表示します:

html { 
  line-height: 1.15; /* Correct the line height in all browsers */
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
} 
  
body { 
  margin: 0; 
} 
  
a { 
  background-color: transparent; /* Remove the gray background on active links in IE 10. */
} 
  
img { 
  border-style: none; /* Remove the border on images inside links in IE 10. */
}

2. ブラウザーのプライベート属性を追加します

#-moz- は、Firefox ブラウザーのプライベート属性を表します

-ms- は IE ブラウザのプライベート プロパティを表します

-webkit- は chrome および safari のプライベート プロパティを表します

-o- は Opera のプライベート プロパティを表します

次の順序に注意してくださいprivate プロパティ 、標準の記述方法を最後に、互換性の記述方法を先頭に置きます

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg);

3. 自動化プラグインを使用します

Autoprefixer はブラウザを自動的に管理するプラグインですリソース構築に Autoprefixer を追加する ツール (Grunt など) を使用した後は、CSS プレフィックスのことを完全に忘れて、最新の W3C 仕様に従って通常どおり CSS を記述するだけで済みます。 Webpack の -env も実行できます。 互換性の問題への対処

//我们编写的代码 
div { 
 transform: rotate(30deg); 
} 
  
// 自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置 
div { 
 -ms-transform: rotate(30deg); 
 -webkit-transform: rotate(30deg); 
 -o-transform: rotate(30deg); 
 -moz-transform: rotate(30deg); 
 transform: rotate(30deg); 
}

関連する推奨事項:

CSS チュートリアル

以上がCSS互換性に対処するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。