Bagaimanakah Saya Boleh Menyasarkan Peraturan CSS Khusus Chrome?

Cara Menyasarkan Peraturan CSS Khusus Chrome

Apabila menyesuaikan elemen web dengan CSS, anda mungkin menghadapi situasi di mana anda perlu menggunakan gaya khusus pada elemen DOM tertentu sahaja dalam penyemak imbas Chrome. Berikut ialah beberapa penyelesaian untuk mencapai perkara ini:

Penyelesaian CSS

1. Pertanyaan Media Webkit: Chrome menggunakan awalan "-webkit" untuk kebanyakan sifat CSSnya . Anda boleh menyasarkan gaya khusus Chrome menggunakan pertanyaan media "-webkit-min-device-pixel-ratio" seperti yang dilihat di bawah:

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

2. Pertanyaan Media Khusus Chrome : Untuk Chrome versi 29 , anda boleh menggunakan pertanyaan media berikut untuk menyasarkan Chrome sahaja:

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

3. Sintaks CSS Khusus Chrome (Chrome 22-28): Dalam Chrome versi 22-28, anda boleh menggunakan "-chrome- :only" sintaks untuk menyasarkan elemen tertentu dalam penyemak imbas:

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

Penyelesaian JavaScript

Anda juga boleh menggunakan JavaScript untuk menyemak sama ada penyemak imbas ialah Chrome dan menggunakan gaya yang diingini dengan sewajarnya:

if (navigator.appVersion.indexOf("Chrome/") != -1) {
  // modify button 
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyasarkan Peraturan CSS Khusus Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!