111

次の CSS を特定divの Google Chrome のみに適用する方法はありますか?

position:relative;
top:-2px;
4

12 に答える 12

202

CSS ソリューション

https://jeffclayton.wordpress.com/2015/08/10/1279/より

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

JavaScript ソリューション

if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button 
}
于 2012-11-27T15:23:27.290 に答える
30

私たちが知っているように、Chrome はWebkitブラウザーであり、Safari も Webkit ブラウザーであり、Opera も同様です。そのため、メディア クエリや CSS ハックを使用して Google Chrome をターゲットにすることは非常に困難ですが、Javascript は実際にはより効果的です。

これは、Google Chrome 14 以降を対象とする Javascript コードの一部です。

  var isChrome = !!window.chrome && !!window.chrome.webstore;

以下は、影響を受けたブラウザを含む Google chrome で利用可能なブラウザ ハックのリストです。

WebKit ハック:

.selector:not(*:root) {}
  • Google Chrome :すべてのバージョン
  • Safari :すべてのバージョン
  • Opera :14 以降
  • Android :すべてのバージョン

ハックをサポート:

@supports (-webkit-appearance:none) {}

Google Chrome 28、および Google Chrome > 28、Opera 14 および Opera > 14

  • Google Chrome : 28 以降
  • Opera :14 以降
  • Firefox : 64 以降(つまり、これは機能しなくなりました)

プロパティ/値ハック:

.selector { (;property: value;); }
.selector { [;property: value;]; }

Google Chrome 28、および Google Chrome < 28、Opera 14 および Opera > 14、および Safari 7 および 7 未満。

  • Google Chrome : 28 以前
  • Safari : 7以前
  • Opera :14 以降

JavaScript ハック:1

var isChromium = !!window.chrome;
  • Google Chrome :すべてのバージョン
  • Opera :14 以降
  • アンドロイド: 4.0.4

JavaScript ハック:2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;
  • Google Chrome :すべてのバージョン
  • Safari : 3 以降
  • Opera :14 以降

JavaScript ハック:3

var isChrome = !!window.chrome && !!window.chrome.webstore;
  • Google Chrome : 14 以降

メディア クエリ ハック:1

@media \\0 screen {}
  • Google Chrome : 22 ～ 28
  • サファリ：7以降

メディア クエリ ハック:2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
  • Google Chrome : 29 以降
  • Opera : 16 以降

詳細については、このウェブサイトをご覧ください

于 2014-08-26T01:30:43.190 に答える
9

この CSS ブラウザー セレクターが役立つ場合があります。見てください。

CSS Browser Selector は、CSS セレクターを強化する 1 行だけの非常に小さな JavaScript です。これにより、各オペレーティング システムおよび各ブラウザーに固有の CSS コードを記述できるようになります。

于 2012-02-17T13:36:13.800 に答える
8

http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html

.selector:not(*:root)セレクターで使用して、特定の CSS ルールを Chrome のみに適用します。

div {
  color: forestgreen;
}
.selector:not(*:root), .div1 {
  color: #dd14d5;
}
<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>

于 2016-11-04T08:12:53.063 に答える
3

今まで、Chrome のみの css ハックをしなければならなかったインスタンスに出くわしたことはありません。ただし、これにより、clear:both; のスライドショーの下にコンテンツが移動することがわかりました。Chrome では何も影響しませんでした (ただし、他の場所では問題なく動作しました - IE でも!)。

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome, if Chrome rule needed */
    .container {
     margin-top:100px;
    }

    /* Safari 5+ ONLY */
    ::i-block-chrome, .container {
     margin-top:0px;
    }
于 2015-05-05T19:55:08.210 に答える
0

Chrome には、CSS 定義を設定するための独自の条件はありません。Chrome は w3c 標準で定義されているように Web サイトを解釈するため、これを行う必要はありません。

したがって、次の 2 つの意味のある可能性があります。

  1. javascript で現在のブラウザを取得する (ここを参照)
  2. php/serverside で現在のブラウザを取得します (こちらを参照)
于 2012-02-17T13:38:04.440 に答える
-1 
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
     #divid{ 
         position:relative;
         top:-2px; 
     }
}

これをチェックしてください。それは私のために働きます。

于 2016-09-10T17:09:03.283 に答える