Pertama -tama, kita tahu bahwa efek ini harus menjadi topik lama.
Ketika memilah file hari ini, saya menemukan bahwa beberapa solusi tata letak saya sebelumnya telah berbaring di folder untuk waktu yang lama. Mari kita lihat yang lama.
Perlu dicatat bahwa saya beruntung telah melihat insinyur lama dan webmaster CSSPlay mencapai efek ini, dan itu pasti telah diberikan terlalu awal.
Lebih sedikit gosip, tambahkan kode sumber:
Memicu dan memanfaatkan fitur aneh dari IE6-Layout, Implementasi CSS:
<Tipe Gaya = Teks/CSS>
.ie6-out {
_margin-kiri: 900px;
_zoom: 1;
}
.ie6-in {
_Posisi: relatif;
_Float: kiri;
_margin-kiri: -900px;
}
#Min-Width {
Min-lebar: 900px;
Latar Belakang: #CCC;
Line-Height: 200px;
_zoom: 1;
}
</tyle>
<Div class = ie6-out>
<Div class = ie6-in>
Di bawah <Div ID = Min-Width> IE6-, wadah menyadari simulasi efek Min-lebar. Harap ubah ukuran jendela browser sesuka hati, lalu klik tombol untuk melihat lebar. </div>
</div>
</div>
Demonstrasi Implementasi CSS:
Jalankan kotak kode
[CTRL A Semua Tip Pilihan: Anda dapat memodifikasi beberapa kode terlebih dahulu, dan kemudian tekan Run]
Demo diperpanjang:
Jalankan kotak kode
[CTRL A Semua Tip Pilihan: Anda dapat memodifikasi beberapa kode terlebih dahulu, dan kemudian tekan Run]
Ekspresi CSS
-Aku percaya bahwa banyak orang sering bermasalah dengan tabrakan yang tidak dapat dijelaskan saat menggunakan metode ini untuk mencapai lebar minimum wadah, dan sering berakhir tanpa hasil.
Ada dua poin yang perlu ditunjukkan di sini:
1. Elemen-elemen yang mewakili viewport di IE6- berbeda dalam mode standar dan mode Quirk. Yang pertama adalah <html> dan yang terakhir adalah <body>;
2. IE6-Dalam dua mode yang berbeda, manifestasinya yang berbeda ketika konten meluap, menghasilkan loop mati dalam penilaian penugasan. Agak bertele -tele untuk menjelaskan, mari kita berlatih sendiri.
Ekspresi CSS mengimplementasikan Kode Sumber Lebar Minimum: <Tipe Gaya = Teks/CSS>
body {text-align: center;}
#Min-Width {
Min-lebar: 900px;
_width: ekspresi ((document.documentelement.clientwidth || document.body.clientwidth) <900? 900px :);
Line-Height: 200px;
Latar Belakang: #CCC;
}
</tyle>
Di bawah <Div ID = Min-Width> IE6-, wadah menyadari simulasi efek Min-lebar. Harap ubah ukuran jendela browser sesuka hati, lalu klik tombol untuk melihat lebar. </div>
Demo:
Jalankan kotak kode
[CTRL A Semua Tip Pilihan: Anda dapat memodifikasi beberapa kode terlebih dahulu, dan kemudian tekan Run]
Dua solusi di atas dapat diimplementasikan dalam mode IE6-standar dan mode Quirk. Ekspresi IE belum menemukan masalah efisiensi CPU dalam aplikasi ini.