Kompilasi tips kompatibilitas CSS untuk browser IE dan Firefox

Penulis：Eve Cole Waktu Pembaruan：2010-08-18 17:35:15

Tip Umum Kompatibilitas CSS

Silakan coba menulis kode dalam format xhtml, dan DOCTYPE mempengaruhi pemrosesan CSS. Sebagai standar W3C, pernyataan DOCTYPE harus ditambahkan.

1.Masalah pemusatan vertikal div

vertical-align:middle; Tingkatkan spasi baris ke ketinggian yang sama dengan keseluruhan garis DIV-height:200px; Kerugiannya adalah Anda perlu mengontrol konten dan tidak membungkusnya di baris lain.

2. Masalah penggandaan margin

Margin yang ditetapkan untuk set div ke float akan digandakan di bawah IE. Ini adalah bug yang ada di ie6. Solusinya adalah dengan menambahkan display:inline; di dalam div ini.

Misalnya:

<#div id=”imfloat”>
Css yang sesuai adalah #imfloat{
mengapung:kiri;
margin:5px;/*Di bawah IE, ini dipahami sebagai 10px*/
display:inline;/*Di bawah IE, ini akan dipahami sebagai 5px*/}

3. Jarak ganda yang dihasilkan oleh floating ie

#box{ float:left; width:100px; margin:0 0 0 100px; //Dalam hal ini, IE akan menghasilkan jarak 200px display:inline;

Mari kita bahas dua elemen blok dan sebaris secara mendetail: Karakteristik elemen blok adalah selalu dimulai pada baris baru, dan tinggi, lebar, tinggi garis, dan margin semuanya dapat dikontrol (elemen blok); elemen inline adalah itu, dan elemen lainnya berada pada baris yang sama dan tidak dapat dikontrol (elemen inline);

#box{ display:block; //Anda dapat menyimulasikan elemen sebaris sebagai elemen blok display:inline; //Mencapai efek penataan pada baris yang sama diplay:table;

4 IE masalah dengan lebar dan tinggi

IE tidak mengenal definisi min-, tetapi sebenarnya memperlakukan lebar dan tinggi normal seolah-olah ada min. Ini adalah masalah besar, jika Anda hanya menggunakan lebar dan tinggi, kedua nilai ini tidak akan berubah di browser normal. Jika Anda hanya menggunakan min-width dan min-height, maka lebar dan tinggi tidak disetel sama sekali di bawah IE.

Misalnya, jika Anda ingin menyetel gambar latar belakang, lebar ini lebih penting. Untuk mengatasi masalah ini, Anda dapat melakukan ini:

#kotak{ lebar: 80 piksel; tinggi: 35 piksel;}html>badan #kotak{ lebar: otomatis; tinggi: otomatis; lebar minimum: 80 piksel;

5. Lebar minimum halaman

min-width adalah perintah CSS yang sangat nyaman. Perintah ini dapat menentukan bahwa lebar minimum suatu elemen tidak boleh lebih kecil dari lebar tertentu, sehingga tata letaknya selalu benar. Namun IE tidak mengenali hal ini, dan sebenarnya memperlakukan lebar sebagai lebar minimum. Untuk membuat perintah ini juga tersedia di IE, Anda dapat meletakkan <div> di bawah tag <body>, lalu menentukan kelas untuk div tersebut, lalu mendesain CSS seperti ini:

#container{ min-width: 600px; width:exPRession(document.body.clientWidth < 600? "600px": "auto" );}

Lebar minimum pertama adalah normal; tetapi lebar pada baris kedua menggunakan javascript, yang hanya dikenali oleh IE, yang juga akan membuat dokumen HTML Anda menjadi kurang formal. Ini sebenarnya mengimplementasikan lebar minimum melalui penilaian Javascript.

6. Teks IE mengambang DIV menghasilkan bug 3 piksel

Objek di sebelah kiri diapungkan, dan di sebelah kanan diposisikan menggunakan margin kiri dari patch luar. Teks di dalam objek di sebelah kanan akan diberi jarak 3px dari kiri.

#kotak{ mengapung:kiri; lebar:800px;}
#kiri{ mengapung:kiri; lebar:50%;}
#kanan{ lebar:50%;}
*html #kiri{ margin-kanan:-3px; //Kalimat ini adalah kuncinya}
<div id="kotak">
<div id="kiri">＜/div>
<div id="kanan">＜/div>
</div>
http://www.devdao.com/
http://yuanma.devdao.com/
7.IE masalah petak umpet

Ketika aplikasi div rumit, ada beberapa tautan di setiap kolom, dan masalah petak umpet dapat dengan mudah terjadi di DIV.

Beberapa konten tidak dapat ditampilkan. Ketika mouse memilih area ini, ternyata konten tersebut memang ada di halaman. Solusi: Gunakan atribut line-height untuk #layout atau gunakan tinggi dan lebar tetap untuk #layout. Jaga struktur halaman sesederhana mungkin.

8. Float div ditutup; ketinggian adaptif yang jelas

①Misalnya: <#div id="floatA" ><#div id="floatB" ><#div id="NOTfloatC" >NOTfloatC di sini tidak ingin terus diterjemahkan, tapi ingin disusun ke bawah. (Properti floatA dan floatB telah disetel ke float:left;)

Kode ini berfungsi dengan baik di IE, masalahnya ada di FF. Alasannya adalah NOTfloatC bukan label float dan label float harus ditutup. Tambahkan <#div class="clear"> di antara <#div class="floatB"> <#div class="NOTfloatC">. Div ini harus memperhatikan posisinya, dan harus sama dengan kedua div tersebut atribut float. Tidak boleh ada hubungan bertingkat antar level, jika tidak, pengecualian akan terjadi. Dan tentukan gaya yang jelas sebagai berikut: .clear{ clear:both;}

② Jangan atur tinggi div sebagai pembungkus eksternal. Untuk memungkinkan ketinggian beradaptasi secara otomatis, tambahkan overflow:hidden di pembungkus; ketika berisi kotak pelampung, adaptasi ketinggian otomatis tidak valid di bawah IE waktu, IE harus dipicu. Atribut tata letak pribadi (IE jahat!) dapat dilakukan menggunakan zoom:1;, sehingga mencapai kompatibilitas.
Misalnya, pembungkus didefinisikan sebagai berikut:

.colwrapper{ luapan:tersembunyi; zoom:1; margin:5px otomatis;}

③Untuk penyusunan huruf, deskripsi CSS yang paling sering kita gunakan mungkin adalah float:left. Terkadang kita perlu membuat latar belakang terpadu di belakang div float di kolom n, misalnya:

Misalnya, kita ingin mengatur latar belakang halaman menjadi biru sehingga warna latar belakang ketiga kolom menjadi biru. Namun, kita akan menemukan bahwa saat kiri tengah kanan membentang ke bawah, halaman sebenarnya tetap memiliki ketinggian yang sama Penyebabnya adalah halaman tersebut bukan atribut float, dan halaman kita tidak bisa diset menjadi float karena harus dipusatkan, jadi sebaiknya kita selesaikan seperti ini.

Solusinya adalah dengan menanamkan DIV kiri float dengan lebar 100%.

④Penutupan pelampung universal (sangat penting!)

Untuk prinsip clear float, silakan lihat [Cara Menghapus Float Tanpa Markup Struktural]. Tambahkan kode berikut ke Global CSS dan tambahkan class="clearfix" ke div yang perlu ditutup.

/* Hapus Perbaikan */
.clearfix:setelah { konten:"."; tampilan:blok; tinggi:0;
.clearfix { tampilan: blok sebaris;
/* Sembunyikan dari IE Mac */
.clearfix {tampilan:blok;}
/* Akhiri penyembunyian dari IE Mac */
/* akhir dari perbaikan yang jelas */

Atau atur seperti ini: .hackbox{ display:table; //Menampilkan objek sebagai tabel tingkat elemen blok}

9. Ketinggiannya tidak dapat disesuaikan

Ketinggian non-adaptif berarti tinggi luar tidak dapat disesuaikan secara otomatis ketika tinggi objek dalam berubah, terutama ketika objek dalam menggunakan margin atau paddign.

contoh:

#kotak {warna latar:#eee; }
#kotak p {margin-atas: 20px; margin-bawah: 20px; perataan teks:tengah }
<div id="kotak">
<p>Isi dalam objek p</p>
</div>

Solusi: Tambahkan dua objek div kosong di atas dan di bawah objek P. Kode CSS: .1{height:0px;overflow:hidden;} atau tambahkan atribut border ke DIV.

10.Mengapa ada celah di bawah gambar di IE6?

Ada banyak teknik untuk mengatasi BUG ini. Anda dapat mengubah tata letak html, atau mengatur img ke display:block atau mengatur atribut vertical-align ke vertical-align:top.

teks-bawah tengah bawah semua bisa diselesaikan.

11. Cara menyelaraskan teks dengan kotak input teks

Tambahkan perataan vertikal:tengah;

12.Apakah ada perbedaan antara id dan kelas yang ditentukan dalam standar web?

(1). Standar web tidak mengizinkan ID berulang. Misalnya, div id='aa' tidak boleh diulang dua kali, dan kelas mendefinisikan suatu kelas referensi dapat digunakan dia.

(2).Masalah prioritas atribut

Prioritas ID lebih tinggi dari kelas, lihat contoh di atas

(3). Lebih mudah untuk skrip klien seperti JS. Jika Anda ingin melakukan operasi skrip pada objek di halaman, Anda dapat menentukan ID untuknya, jika tidak, Anda hanya dapat menemukannya dengan melintasi elemen halaman dan menentukan atribut tertentu Ini relatif membuang-buang waktu dan sumber daya, tetapi jauh lebih sederhana dibandingkan ID.

13. Tips menampilkan konten di LI dengan elips setelah melebihi panjangnya

Teknik ini berlaku untuk browser IE dan OP

<gaya tipe="teks/css">
<!--
li {
lebar:200 piksel;
spasi putih:nowrap;
luapan teks: elipsis;
-o-text-overflow:elipsis;
meluap: tersembunyi;
}

-->
</gaya>

14. Mengapa IE tidak dapat mengatur warna bilah gulir sesuai standar web?

Solusinya ganti body dengan html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Ketat//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<meta http-equiv="Jenis Konten" content="teks/html; charset=gb2312" />
<gaya tipe="teks/css">

＜/gaya>

15. Mengapa saya tidak bisa mendefinisikan wadah dengan tinggi sekitar 1 piksel?

Masalah di IE6 ini disebabkan oleh tinggi baris default, dan ada banyak teknik penyelesaian, seperti:
overflow:zoom tersembunyi:0,08 tinggi garis:1px

16. Bagaimana cara membuat tampilan layer di Flash?

Solusinya adalah mengatur transparansi untuk FLASH

17. Cara memusatkan lapisan secara vertikal di browser

Di sini kita menggunakan penentuan posisi absolut persentase, dan teknik menggunakan nilai negatif di luar patch. Besaran nilai negatif adalah lebar dan tinggi sendiri dibagi dua.

Tip Kompatibilitas CSS untuk Firefox dan IE

1. Masalah pemusatan div

Div sudah berada di tengah ketika margin-kiri dan margin-kanan disetel ke otomatis. Ini tidak berfungsi dengan IE. IE perlu menyetel isi menjadi terpusat. Pertama-tama tentukan text-algin: center di elemen induk; konten dalam elemen induk berada di tengah.

2. Batas dan latar belakang tautan (tag)

Untuk menambahkan batas dan warna latar belakang ke tautan, Anda perlu mengatur display: block dan float: left untuk memastikan tidak ada jeda baris. Mengacu pada menubar, pengaturan ketinggian a dan menubar adalah untuk menghindari dislokasi tampilan tepi bawah. Jika ketinggian tidak diatur, spasi dapat disisipkan pada menubar.

3. Masalah gaya hover tidak muncul setelah hyperlink diakses

Style hyperlink yang sudah diklik dan dikunjungi sudah tidak ada hover dan aktif. Pasti banyak orang yang mengalami masalah ini. Solusinya adalah dengan mengubah urutan atribut CSS: LVHA

Kode:

4. Kursor jari kursor

kursor: penunjuk dapat menampilkan bentuk jari kursor di IE FF secara bersamaan, tangan hanya dapat ditampilkan di IE

5. Bantalan dan margin UL

Tag ul memiliki nilai padding secara default di FF, tetapi di IE hanya margin yang memiliki nilai secara default, jadi mendefinisikan ul{margin:0;padding:0;} terlebih dahulu dapat menyelesaikan sebagian besar masalah.

6. Label BENTUK

Label ini otomatis akan memiliki beberapa margin di IE, sedangkan di FF marginnya 0. Oleh karena itu, jika ingin menampilkannya secara konsisten, sebaiknya tentukan margin dan padding di css , style ul, form{margin:0;padding:0;} ditentukan terlebih dahulu, jadi Anda tidak perlu mengkhawatirkan hal ini nanti.

7. Masalah inkonsistensi penjelasan model BOX

Interpretasi model BOX di FF dan IE tidak konsisten, sehingga menghasilkan perbedaan 2px. Tips solusi: div{margin:30px!important;margin:28px;} Perhatikan bahwa urutan kedua margin tidak boleh dibalik atribut penting, tetapi browser tidak dapat mengenalinya. Jadi di bawah IE sebenarnya diartikan seperti ini:

Jika div{maring:30px;margin:28px} didefinisikan berulang kali, yang terakhir akan dieksekusi, jadi Anda tidak bisa hanya menulis margin:xx px!important;#box{ width:600px; idth:500px ; //untuk ff+ie6.0}
#kotak{ lebar:600px!penting //untuk lebar ff:600px; //untuk lebar ff+ie6.0 /**/:500px;

8. Pemilih atribut (ini tidak dapat dianggap kompatibel, ini adalah bug dalam menyembunyikan css)

p[id]{}div[id]{}

Ini disembunyikan untuk IE6.0 dan versi di bawah IE6.0, dan berfungsi di FF dan Opera. Masih ada perbedaan antara penyeleksi atribut dan sub-selektor penyeleksinya relatif besar, seperti p[id], semua tag p dengan id memiliki gaya yang sama.

9. Cara yang paling kejam - !penting

Jika memang tidak ada cara untuk menyelesaikan beberapa masalah mendetail, Anda dapat menggunakan teknik ini. FF akan secara otomatis mengurai "!important" terlebih dahulu, tetapi IE akan mengabaikannya

.tabd1{
background:url(/res/images/up/tab1.gif) tanpa pengulangan 0px 0px !penting; /*Gaya untuk FF*/
background:url(/res/images/up/tab1.gif) tanpa pengulangan 1px 0px; /* Gaya untuk IE */}

Perlu diperhatikan bahwa kalimat xxxx !important harus ditempatkan di atas kalimat lainnya.

10. Masalah nilai default IE dan FF

Mungkin Anda pernah mengeluh mengapa Anda harus menulis CSS yang berbeda khusus untuk IE dan FF, mengapa IE sangat memusingkan, dan kemudian saat menulis CSS, Anda mengutuk M$ IE sialan itu. Faktanya, IE tidak memiliki dukungan standar untuk CSS yang kami lakukan memang menjijikkan seperti yang anda bayangkan, namun yang penting nilai default IE dan FF berbeda kompatibel dengan FF dan IE. Mungkin untuk CSS sederhana, Anda tidak memerlukannya sama sekali”!

Kita semua tahu bahwa ketika browser menampilkan halaman web, ia akan memutuskan bagaimana menampilkannya berdasarkan style sheet css halaman web tersebut, namun kita belum tentu menjelaskan semua elemen secara detail di style sheet, dan tentu saja ada tidak perlu melakukan itu. Jadi untuk atribut yang tidak dijelaskan, browser akan menggunakan metode default bawaan untuk menampilkannya, seperti teks. Jika Anda tidak menentukan warna di css, browser akan menggunakan warna hitam atau sistem warna untuk menampilkan latar belakang div atau elemen lainnya, jika tidak ditentukan dalam css, browser akan mengaturnya menjadi putih atau transparan, dan seterusnya untuk gaya lain yang tidak ditentukan. Oleh karena itu, alasan mendasar mengapa banyak hal ditampilkan secara berbeda antara FF dan IE adalah karena tampilan defaultnya berbeda. Mengenai cara menampilkan gaya default ini, saya tahu jika ada standar yang sesuai di w3 yang menetapkannya, jadi tidak ada perlu mengomentari hal ini.

11. Mengapa teks di FF tidak bisa memperbesar tinggi wadah?

Kontainer dengan nilai ketinggian tetap di browser standar tidak akan diregangkan seperti di IE6. Jadi jika saya ingin memiliki ketinggian tetap dan diregangkan, pengaturan apa yang harus saya lakukan? Solusinya adalah dengan menghilangkan height dan mengatur min-height:200px; disini untuk menjaga IE6 yang tidak mengetahui min-height dapat didefinisikan seperti ini:

{
tinggi:otomatis!penting;
tinggi:200 piksel;
tinggi minimum:200px;
}

12.Cara membuat kolom panjang terus menerus secara otomatis dibungkus di FireFox

Seperti yang kita ketahui bersama, di IE, Anda bisa langsung menggunakan Word-wrap:break-word. Di FF, kami menggunakan teknik penyisipan JS untuk menyelesaikan masalah tersebut.

<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaa</div>

<scrīpt type="teks/javascrīpt">
/* <![CDATA[ */
fungsi toBreakWord(el, intLen){
var ōbj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+="
"+strKonten;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord("ff", 37);
/* ]]> */
</skrip>

13. Mengapa lebar wadah di IE6 berbeda dengan di FF?

Perbedaan masalahnya adalah apakah lebar keseluruhan container termasuk lebar border. Di sini IE6 mengartikannya sebagai 200PX, sedangkan FF mengartikannya sebagai 220PX. Jika Anda menghapus xml di bagian atas wadah, Anda akan menemukan bahwa masalah aslinya terletak di sini. Pernyataan di atas memicu mode qurks IE.

<?xml versi="1.0" pengkodean="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Ketat//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<meta http-equiv="Jenis Konten" content="teks/html; charset=gb2312" />
<gaya tipe="teks/css">

</gaya>
<div ōnclick="alert(this.offsetWidth)">Jadikan FireFox kompatibel dengan IE</div>

Ada masalah baru dengan dukungan IE7.0 untuk CSS, yang diselesaikan sebagai berikut.

Tipe pertama, CSS HACK

Bpx; /*Untuk IE7 & IE6*/
_tinggi:20 piksel; /*Untuk IE6*/

Perhatikan pesanannya.

Berikut ini juga merupakan HACK CSS, namun tidak sesederhana di atas.

#contoh { warna: #333 } /* Moz */
* html #contoh { warna: #666 } /* IE6 */
*+html #contoh { warna: #999; } /* IE7 */

Yang kedua adalah menggunakan komentar kondisional khusus IE

<link rel="stylesheet" type="teks/css" href="css.css" />

<link rel="stylesheet" type="teks/css" href="ie7.css" />
<![endif]-->

<link rel="stylesheet" type="teks/css" href="ie.css" />
<![endif]-->

Cara yang ketiga adalah cara css filter, berikut ini terjemahannya dari website luar negeri.

Buat gaya css baru sebagai berikut:

#barang {
lebar: 200 piksel;
tinggi: 200 piksel;
latar belakang: merah;
}

Buat div baru dan gunakan gaya CSS yang ditentukan sebelumnya:

Tambahkan atribut lang di sini di body performance, bahasa Mandarinnya adalah zh:

Sekarang tentukan gaya lain untuk elemen div:

*:lang(en) #barang{
latar belakang:hijau!penting;
}

Ini dilakukan untuk menimpa gaya css asli dengan !important. Karena pemilih :lang tidak didukung oleh IE7.0, ini tidak akan berpengaruh apa pun pada kalimat ini, jadi efek yang sama di bawah IE6.0 tercapai sangat sulit. Sayangnya Safari juga tidak mendukung atribut ini, jadi Anda perlu menambahkan gaya CSS berikut:

#barang:kosong {
latar belakang: hijau!penting
}

Pemilih :empty adalah spesifikasi CSS3. Meskipun Safari tidak mendukung spesifikasi ini, elemen ini akan tetap dipilih, terlepas dari apakah elemen ini ada, warna hijau sekarang akan muncul di browser selain versi IE.

Untuk kompatibilitas dengan IE6 dan FF, Anda dapat mempertimbangkan !penting sebelumnya. Secara pribadi, saya lebih suka yang pertama, yang sederhana dan memiliki kompatibilitas yang lebih baik.