Perbezaan dalam sokongan DIV antara pertukaran IE6, IE7 dan Firefox_Experience

1 gaya CSS untuk firefox ie6 ie7

Pada masa kini kebanyakannya menggunakan !important untuk menggodam Untuk ujian ie6 dan firefox, ia boleh dipaparkan seperti biasa, tetapi ie7 boleh mentafsirkan !important dan akan dengan betul. Akibatnya, halaman tidak dipaparkan seperti yang diperlukan! Saya menemui hack yang baik untuk IE7 menggunakan "*+html".

Sekarang tulis CSS seperti ini:

#1 { color: #333; } /* Moz */
* html #1 { color: #666 } /* IE6; */
*+html #1 { color: #999; } /* IE7 */

Kemudian warna fon dipaparkan sebagai #333 di bawah firefox, #666 di bawah IE6 dan #666 di bawah IE7 Warna fon muncul sebagai #999.

2 Memusatkan isu dalam reka letak css

Takrifan gaya utama adalah seperti berikut:

body {TEXT-ALIGN: center;}
# tengah { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

Penjelasan:

Pertama tentukan TEXT-ALIGN: tengah dalam elemen induk Kandungan adalah berpusat; untuk IE, tetapan ini sudah memadai.

Tetapi ia tidak boleh dipusatkan di mozilla. Penyelesaiannya adalah dengan menambah "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; " apabila menetapkan definisi elemen kanak-kanak

Perlu diingat bahawa jika anda ingin menggunakan kaedah ini untuk memusatkan keseluruhan halaman , ia adalah disyorkan untuk tidak membungkusnya dalam DIV Anda boleh membahagikan berbilang div dalam urutan, hanya tentukan MARGIN-RIGHT: auto;MARGIN-LEFT: auto;

3 Tafsiran berbeza model kotak.

#kotak{
lebar:600px;
//untuk ie6.0- lebar:500px;
//untuk ff+iaitu6.0
}
#kotak{
lebar:600px!penting
//untuk ff
lebar:600px; +iaitu6 .0
lebar /**/:500px;
//untuk ie6.0-
}


4 Jarak berganda dijana dengan terapung iaitu
#box{ float:left; width:100px; > Mari kita bincangkan tentang dua elemen blok dan sebaris secara terperinci Ciri-ciri elemen Blok ialah: ia sentiasa bermula pada baris baharu, dan ketinggian, lebar, ketinggian garisan dan jidar semuanya boleh dikawal (elemen blok); ciri elemen Sebaris ialah: dan Elemen lain berada pada baris yang sama,... tidak boleh dikawal (elemen sebaris); :inline; //Mencapai baris yang sama Kesan susunan diplay:table; min-, tetapi sebenarnya ia meletakkan lebar biasa Gunakan ketinggian dan ketinggian seolah-olah ada min. Ini adalah masalah besar. Jika anda hanya menggunakan lebar dan tinggi, kedua-dua nilai ini tidak akan berubah dalam penyemak imbas biasa Jika anda hanya menggunakan lebar dan ketinggian min, lebar dan tinggi tidak ditetapkan sama sekali di bawah IE. Sebagai contoh, jika anda ingin menetapkan imej latar belakang, lebar ini lebih penting. Untuk menyelesaikan masalah ini, anda boleh melakukan ini:

#box{ width: 80px;}html>body #box{ width: auto; ketinggian: 35px;}


6 Lebar minimum halaman

lebar min ialah arahan CSS yang sangat mudah Ia boleh menentukan bahawa lebar minimum elemen tidak boleh kurang daripada lebar tertentu, supaya Ia dapat memastikan bahawa tetapan taip sentiasa betul. Tetapi IE tidak mengenali ini, dan ia sebenarnya menganggap lebar sebagai lebar minimum. Untuk membuat arahan ini berfungsi pada IE, anda boleh meletakkan di bawah teg
, dan kemudian tentukan kelas untuk div:
Kemudian CSS direka seperti ini:

#container{
min-width: 600px;
width:expression(document.body.clientWidth Min pertama- lebar adalah Normal; tetapi lebar dalam baris 2 menggunakan Javascript, yang hanya diiktiraf oleh IE, yang juga akan menjadikan dokumen HTML anda kurang formal. Ia sebenarnya melaksanakan lebar minimum melalui penghakiman Javascript.

7 Terapung jelas

.kotak godam{
  paparan:meja;
//Paparkan objek sebagai jadual tahap elemen blok
}

atau

.kotak penggodam{
jelas:kedua-duanya;
}

atau tambah: selepas (objek pseudo) untuk menetapkan kandungan yang berlaku selepas objek, biasanya Digunakan bersama dengan kandungan, IE tidak menyokong objek pseudo ini dan tidak disokong oleh pelayar Ie, jadi ia tidak menjejaskan pelayar IE/WIN. Inilah yang paling menyusahkan

......#box:after{
kandungan: ".";
tinggi: 0; kedua-duanya;
keterlihatan: tersembunyi;
}


8 DIV terapung teks IE menghasilkan pepijat 3 piksel
Objek kiri terapung, dan kanan sisi menggunakan Diposisikan luar oleh jidar kiri tampung, teks dalam objek kanan ialah 3px dari kiri

#box{
float:left
width:800px;}
#kiri{
apung:kiri;
lebar:50%;}
#kanan{
lebar:50%; > margin-kanan:- 3px;
//Ayat ini adalah kunci
}
Kod HTML






p[id]{}div [id]{}
p[id]{}div[id]{} Ini disembunyikan untuk versi di bawah IE6.0 dan IE6.0 dan OPera masih berfungsi

Pemilih atribut dan sub-pemilih Terdapat perbezaan Skop sub-pemilih dikecilkan dalam bentuk, dan skop pemilih atribut adalah agak besar, sebagai contoh, dalam p[id], semua tag p dengan id gaya yang sama.


10 IE masalah sorok-sorok


Apabila aplikasi div kompleks dan terdapat beberapa pautan dalam setiap lajur, sorok-dan- mencari masalah DIV adalah mudah berlaku pada masa ini.
Sesetengah kandungan tidak boleh dipaparkan Apabila tetikus memilih kawasan ini, didapati kandungan itu memang ada pada halaman. Penyelesaian: Gunakan atribut ketinggian garis untuk #layout atau gunakan ketinggian dan lebar tetap untuk #layout. Pastikan struktur halaman semudah mungkin.

11 Ketinggian tidak sesuai


Ketinggian tidak sesuai apabila ketinggian objek dalam berubah, ketinggian lapisan luar tidak boleh dilaraskan secara automatik, terutamanya apabila objek dalam digunakan
Margin atau paddign. Contoh:

 
Kandungan dalam objek p

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; kod objek div: .1{height:0px;overflow:hidden;} atau tambahkan atribut sempadan pada DIV.