IE6 mengimplementasikan Min-lebar

Penulis：Eve Cole Waktu Pembaruan：2025-06-12 13:48:01

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:

.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>

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>

Demonstrasi Implementasi CSS:

Jalankan kotak kode

<html xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <title> css mencapai lebar minimum </iteme> <style type = text/css> body { Text-Align: center;}. IE6-out {_margin-left: 900px; _zoom: 1;}. Ie6-in {_posisi: relatif; _float: kiri; _margin-le ft: -900px;}#min-width {min-lebar: 900px; latar belakang: #ccc; line-height: 200px; _zoom: 1;} </style> </head> <body> <Div class = ie6-out> <div class = ie6-in> <Div id = min-d-width> ie6-, wadah mewakili simulasi efek lebar min. Harap ubah ukuran jendela browser sesuka hati, lalu klik tombol untuk melihat lebar. </div> </div> </div> <input name = type = tombol onClick = alert ('container width =' document.geteLementById ('min-width'). clientwidth 'px' '/n/n' 'viewport width =' (document.documentElement.clientwidth || document.clientth) (document.documentelement.clientwidth || document.body (document.documentelement.clients; value = view width/> </body> </html>

[CTRL A Semua Tip Pilihan: Anda dapat memodifikasi beberapa kode terlebih dahulu, dan kemudian tekan Run]

Demo diperpanjang:

Jalankan kotak kode

<html xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <title> css mencapai lebar minimum </iteme> <style type = text/css> body { Text-Align: center;}. IE6-out {_margin-left: 900px; _zoom: 1;}. Ie6-in {_posisi: relatif; _float: kiri; _margin-left: -900p x; latar belakang:#f00; line-height: 200px;}#min-width {min-width: 900px; latar belakang: #ccc; _zoom: 1;} </style> </head> <body> <Div class = ie6-out> <div class = ie6-in> aa </div> </div> <div class = ie6-out> <div class = ie6-in> aa <div di bawah id = min-lebar> ie6-, wadah tersebut menyadari simulasi efek minimal. Harap ubah ukuran jendela browser sesuka hati, lalu klik tombol untuk melihat lebar. </div> </div> </div> <input name = type = tombol onClick = alert ('container width =' document.geteLementById ('min-width'). clientwidth 'px' '/n/n' 'viewport width =' (document.documentElement.clientwidth || document.clientth) (document.documentelement.clientwidth || document.body (document.documentelement.clients; value = view width/> </body> </html>

[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

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; Charset = GB2312/> <Title> Ekspresi CSS mencapai lebar minimum </title> <style type = text/css> body { Text-Align: center;}#min-width {min-width: 900px; _width: ekspresi ((document.documentelement.clientwidth || document.body.clientwidth) <900? 900px :); line-height: 200px; latar belakang: #ccc; _zoom: / /* Laper Laper: 200px; latar belakang: #ccc; _zoom: / /* Laper Laper: 200px; latar belakang: #ccc; _zoom: / /* Laper Laper: 200px; latar belakang: #ccc; _zoom: / /* Laper Laper: 200px; latar belakang: #ccc; _zoom: / /* Laper Laper: 200px; latar belakang: #ccc; _zoom: / /* */} </tyle> </head> <body> <v id = min-lebar> ie6-, wadah ini menyadari efek lebar min. Harap ubah ukuran jendela browser sesuka hati, lalu klik tombol untuk melihat lebar. </div> <input name = type = tombol onClick = alert ('container width =' document.geteLementById ('min-width'). clientWidth 'px' '/n/n' 'viewport width =' (document.documentelement.clientwidth || document.body.clientwidth) 'px'); value = view width/> </body> </html>

[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.