CSS ルールを Google Chrome にのみ適用するにはどうすればよいですか?

特定の CSS ルールを Chrome に独占的に適用する

Google Chrome の独自のレンダリング エンジンに対応するには、多くの場合 CSS ルールを適用する必要があります。専らそれ専用。一例として、div 要素の位置を調整します。

CSS ソリューション:

ベンダー プレフィックスを利用して、次のように Chrome 固有のスタイルをターゲットにできます:

• Chrome、Safari、Edge の場合Firefox:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  div {
    top: 10px;
  }
}

• Chrome 29 の場合 (分数 DPI 値をサポート)

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  div {
    top: 0px;
  }
}

• Chromeの場合22-28:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .selector {
    -chrome-only(top: 0px);
  }
}

JavaScript 解決策:

CSS の代わりに、JavaScript を使用して Chrome ブラウザーを検出し、それに応じて div のスタイルを変更します:

if (navigator.appVersion.indexOf("Chrome/") != -1) {
  // Modify the div's top position here
}

以上がCSS ルールを Google Chrome にのみ適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。