Ensiklopedia Hack CSS - Ajar anda cara membezakan IE6-IE10, FireFox, Chrome, pertukaran Opera

Ensiklopedia Hack CSS - Ajar anda cara membezakan IE6-IE10, FireFox, Chrome, pertukaran Opera_Experience

WBOY

Lepaskan： 2016-05-16 12:03:43

asal

1622 orang telah melayarinya

Pelayar semasa ialah IE6-IE10, Firefox, Chrome, Opera dan Safari. . . Terdapat begitu banyak, boleh dikatakan bahawa seratus sekolah pemikiran bertanding, dan terdapat banyak pilihan untuk pengguna, tetapi ini adalah kesakitan bagi pembangun bahagian hadapan Web.
Hari ini saya menyusun beberapa Hacks CSS yang biasa digunakan, termasuk hacks IE yang biasa digunakan dan Hacks untuk penyemak imbas Firefox, Chrome dan Opera Saya menggabungkan Hacks CSS ini dan menulis penguji penyemak imbas kecil. Seperti yang ditunjukkan dalam gambar:

Ensiklopedia Hack CSS - Ajar anda cara membezakan IE6-IE10, FireFox, Chrome, pertukaran Opera_Experience

Mari kita lihat kod:

bahagian html:

Salin kod Kod adalah seperti berikut:

="warna latar belakang:< #t/c;" 🎜> /p>

Warna latar belakang dalam IE8: #06f

Warna latar belakang di bawah IE10: #0ff

#ff0 p> ;Warna latar belakang dalam Opera: #0f0

< ;/div>

Bahagian CSS, hanya bahagian Hack kod akan disiarkan di bahagian ini, dan reka letak tidak akan disiarkan:

Salin kod

Kod adalah seperti berikut:.content .test { lebar : 200px;

tinggi: 200px;

 latar belakang: #f60; /*semua*/
 latar belakang: #06f9; */
 _latar belakang: #ccc; /*IE6*/
}

/* webkit dan opera */
@media semua dan (lebar min:0){
 .content . ujian {
 latar belakang: #0f0;
 }
}

/* webkit */
@media skrin dan (-webkit-min-device-pixel-ratio :0) {
 .content .test {
 latar belakang: #ff0;
 }
}

/*FireFox*/
@-moz-document url-prefix () { 
 .kandungan .ujian {
 latar belakang: #f0f;
 }
}

/*IE9+*/
@media semua dan (lebar min: 0) { 
 .content .test{
 latar belakang: #f009;
 }
}

/*IE10+*/
@media skrin dan (-ms-high -kontras: aktif), (-ms-high-contrast: tiada) {
 .content .test {
 latar belakang: #0ff;
 }
} 






css-hack-ms-moz-webkit-o-Jb51.net.rar