Periksa cepat ringkasan Peretasan CSS terbaru

Blokir browser IE (yaitu, tidak akan ditampilkan di bawah IE)

*:lang(zh) pilih {font:12px !important;} /*Khusus untuk FF*/
pilih:kosong {font:12px !important;} /*safari terlihat*/

Di sini pilih adalah pemilih, yang dapat diubah sesuai situasi. Kalimat kedua unik untuk browser Safari di MAC.

Hanya dikenali oleh IE7

*+html{…}

Anda dapat menggunakan HACK ini ketika Anda perlu membuat style hanya untuk IE7.

Identifikasi IE6 dan di bawahnya

* html {…}

Berikan perhatian khusus pada poin ini. Banyak pemilik yang menulis bahwa ini adalah HACK untuk IE6. Faktanya, IE5.x juga dapat mengenali HACK ini. Browser lain tidak mengenalinya.

html/**/ >pilih badan {……}

Kalimat ini mempunyai efek yang sama dengan kalimat sebelumnya.

Hanya IE6 yang tidak mengenalinya

pilih { tampilan /*IE6 tidak mengenali*/:tidak ada;}

Hal utama di sini adalah memisahkan atribut dan nilai melalui komentar CSS, yang dikeluarkan sebelum titik dua.

Hanya IE6 dan IE5 yang tidak dikenali

pilih/**/ { tampilan /*IE6, IE5 tidak mengenalinya*/:tidak ada;}

Bedanya dengan kalimat di atas adalah terdapat tambahan komentar CSS di antara selector dan kurung kurawal.

Hanya IE5 yang tidak mengenalinya

pilih/*IE5 tidak mengenali*/ { tampilan:tidak ada;}

Kalimat ini merupakan komentar pada area atribut yang dihilangkan dari kalimat sebelumnya. Hanya IE5 yang tidak mengenalinya

Solusi model kotak

selct {lebar:IE5.x lebar; keluarga suara :""}""; keluarga suara:mewarisi lebar: lebar yang benar;}

Metode kliring model kotak tidak ditangani melalui !important. Ini harus jelas.

pelampung bening

pilih:setelah {konten:"."; tampilan:blok; tinggi:0;

Di Firefox, ketika semua anak mengambang, tinggi induk tidak dapat menutupi seluruh anak sepenuhnya. Kemudian gunakan HACK ini untuk menghapus mengambang untuk mendefinisikan induk satu kali, maka masalah ini dapat diselesaikan.

Memotong elipsis

pilih { -o-text-overflow:ellipsis; text-overflow:ellipsis;

Ini adalah teknik yang sangat bagus yang secara otomatis akan memotong teks berlebih setelah melebihi panjangnya, dan mengakhirinya dengan elipsis. Hanya saja Firefox saat ini tidak mendukungnya.

Hanya dikenali oleh Opera

@media semua dan (lebar minimum: 0 piksel){ pilih {……} }

Buat pengaturan terpisah untuk browser Opera.

Di atas adalah beberapa HACK dalam penulisan CSS. Ini digunakan untuk menyelesaikan masalah kompatibilitas lokal. Jika Anda ingin memisahkan konten kompatibilitas, Anda sebaiknya mencoba filter berikut. Beberapa dari filter ini ditulis dalam CSS untuk mengimpor gaya khusus melalui filter, dan beberapa lagi ditulis dalam HTML untuk menautkan atau mengimpor gaya patch yang diperlukan melalui kondisi.

Filter untuk IE5.x, hanya IE5.x yang terlihat

Filter IE5/MAC umumnya tidak diperlukan

IE jika Hack bersyarat

<!--[jika IE]> Hanya IE <![endif]-->

Semua IE mengenali

<!--[jika IE 5.0]> Hanya IE 5.0 <![endif]-->

Hanya IE5.0 yang dapat mengenalinya

<!--[jika gt IE 5.0]> Hanya IE 5.0+ <![endif]-->

IE5.0 dapat dikenali oleh IE5.5

<!--[if lt IE 6]> Hanya IE 6- <![endif]-->

Hanya dikenali oleh IE6

<!--[jika gte IE 6]> Hanya IE 6/+ <![endif]-->

Dapat dikenali oleh IE6 dan IE5.x di bawah IE6

<!--[if lte IE 7]> Hanya IE 7/- <![endif]-->

Hanya dikenali oleh IE7

Konten di atas mungkin tidak komprehensif. Anda dipersilakan untuk bergabung dengan saya dalam merangkum teknik-teknik ini untuk memberikan kemudahan bagi pertanyaan pekerjaan di masa depan. Pada saat yang sama, saya ingin mengucapkan terima kasih kepada penulis yang telah meneliti HACK ini.