Dalam tutorial saya sebelumnya "Tata Letak Dasar Sembilan Istana", saya memperkenalkan metode penggunaan penentuan posisi relatif dan penentuan posisi absolut untuk membuat tata letak dasar Sembilan Istana. Ini adalah metode yang lebih sejalan dengan pemikiran inersia orang. Tampaknya segala sesuatu dalam proses produksi adalah hal yang biasa. Namun, karena paritas BUG yang menjijikkan di IE6, tata letak ini menjadi agak di luar jangkauan metode ini bersifat universal, karena sebagian besar pengguna domestik masih menggunakan IE6, dan kami tidak dapat kehilangan pengguna tersebut karena hal ini.
Saat ini belum ada obat untuk BUG ini, dan tidak ada peretasan yang dapat digunakan. Satu-satunya cara untuk menggunakannya adalah dengan mem-bypassnya. Dengan kata lain, saya ingin menemukan empat wadah sudut dari kotak sembilan persegi. Metode penentuan posisi absolut tidak dapat digunakan. Ini merupakan pukulan besar. Ini akan sepenuhnya membatalkan metode yang digunakan dalam artikel saya sebelumnya lagi.
Jadi, teknologi apa lagi yang bisa menyelamatkan BUG ini dari kesulitan? Kita tahu bahwa jika Anda menggunakan metode mengambang kiri dan kanan, Anda dapat mengimbangi objek elemen secara akurat, dan metode ini juga dapat menghindari paritas BUG IE6. Oke, mari kita gunakan.
Poin-poin penting dan kesulitan dalam tata letak
Kami masih membangun struktur model baru kami sesuai dengan struktur tabel, namun kali ini akan berbeda dengan struktur artikel sebelumnya. Poin-poin penting dan kesulitan yang perlu kita perhatikan dalam model ini adalah dua poin berikut:
1. Nilai lebar dari dua wadah perantara t_m dan b_m harus berupa nilai persentase, jika tidak, perluasan dinamis kiri dan kanan dari seluruh kisi sembilan persegi tidak dapat dijamin, dan tidak boleh berupa nilai piksel tetap. Lebarnya sama dengan lebar total wadah dikurangi jumlah lebar kedua wadah sudut dalam persentase. Rumus perhitungannya adalah:
Lebar t_m (atau b_m) = (total lebar kontainer - (lebar kontainer pojok kiri atas + lebar kontainer pojok kanan atas)) / total lebar kontainer
Artinya, lebar t_m atau b_m tidak 100%. Namun, lebar kedua wadah t_l dan t_r umumnya adalah lebar gambar dalam kasus sebenarnya, sehingga umumnya merupakan nilai lebar tetap, sehingga dalam tiga yang sama Dalam sebuah wadah, lebar sisi kiri dan kanan adalah nilai tetap, tetapi bagian tengahnya memerlukan persentase, dan total lebar ketiga wadah ini harus berjumlah 100%.
Di sini kami menggunakan metode yang relatif aman untuk membuat wadah tengah mencapai persentase lebar ideal:
Kita dapat menggunakan wadah DIV dan mengatur paddingnya: 0 10px, jangan atur lebarnya secara default. Karena nilai padding kiri dan kanan sudah disetel, maka lebar internal adalah nilai lebar ideal t_m yang kita inginkan, jadi kita tentukan container di dalamnya, dan lebar subkontainer ini disetel ke 100%. Warna latar belakang subkontainer ini dapat diatur menjadi gambar latar belakang yang disusun secara horizontal di kiri dan kanan. Subcontainer ini adalah container teratas yang akan kita gunakan. Ini memenuhi persyaratan khusus kami untuk nilai lebar.
Oleh karena itu, struktur t_m dapat dibuat menjadi struktur berikut:
Namun, definisi ini akan menimbulkan masalah lain. Masalah ini terjadi pada browser di bawah IE7. Karena kami mendefinisikan padding, ini juga akan menghasilkan patch bagian dalam kiri dan kanan di lapisan tengah tubuh di bawah IE7?
Jadi solusinya adalah dengan menggunakan trik HACK di sini untuk IE6 dan IE7:
.b_l{margin-kiri:0px;+margin-kiri:-10px;_margin-kiri:-10px;}
.b_r{margin-kanan:0px;+margin-kanan:-10px;_margin-kanan:-10px;}
Kalimat ini menetapkan nilai offset yang berbeda untuk tiga browser, dan offset b_l dan b_r ke kiri dan kanan ke posisi yang ditentukan.
2. Nilai tinggi kedua container b_l dan b_r harus sama agar dapat menyusun warna background secara vertikal ke bawah. Dengan cara ini, ketika tinggi konten di tengah area konten utama (konteks) berubah, warna latar belakang di kedua sisi selalu dapat dipertahankan sama tingginya dengan area konten utama (konteks). Artinya, mereka dapat dengan leluasa meregangkan tinggi badannya sesuai dengan tinggi badan isi.
Kita bisa menggunakan metode beberapa kolom dengan tinggi yang sama yang sering digunakan dalam pekerjaan sehari-hari untuk mengatasi masalah ini. Metode ini menggunakan kombinasi patch dalam dan patch luar negatif untuk mencapai ketinggian yang sama untuk beberapa kolom:
.m_l,.m_r{padding-bawah:30000px;margin-bottom:-30000px;}
Kami menetapkan nilai padding-bottom dari patch bagian dalam bawah m_l dan m_r ke nilai yang relatif besar. Misalnya, saya menetapkannya ke 30000px (Anda dapat mengaturnya ke nilai yang Anda inginkan). tidak melebihi nilai ketinggian ini. Kemudian atur patch luar bawah (margin-bottom) ke nilai negatif yang sama dengan nilai patch dalam bawah (padding-bottom), tarik kembali ke posisi semula, dan atur total container (kotak) ke overflow:hidden;, Potong kelebihan tinggi untuk memastikan kedua kolom memiliki tinggi yang sama.
Setelah menyelesaikan dua soal sulit di atas, sisanya sederhana dan menyenangkan! [Potong Halaman]
lapisan struktural
Sekarang kita telah menyesuaikan struktur layer berdasarkan kasus sebelumnya, sehingga menjadi struktur berikut:
Berikut isi kutipannya:
Area isi konten |
lapisan gaya
Berikut adalah pengaturan gaya utama:
Berikut isi kutipannya: /*Jumlah kontainer*/ .box{overflow:hidden;width:50%;margin:50px otomatis 0;latar belakang:#fff;} /*Gaya teratas*/ /*Gaya menengah*/ /*Gaya bawah*/ |
Anda dapat menggunakan delapan gambar untuk membuat kotak kotak sembilan persegi yang indah. Lihat betapa sempurnanya itu.
Model ini telah diuji pada browser berikut:
IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0.
Berikut isi kutipannya: Ini adalah model tata letak kotak sembilan. Tidak ada gambar yang dimuat. Silakan regangkan dan ubah ukuran jendela sesuka Anda. Anda akan melihat bahwa kotak sembilan kotak membentang dengan bebas dan elastis ke segala arah. Model ini telah memodifikasi kekurangan versi sebelumnya, menggunakan metode mengambang untuk menghindari bug aneh 1px lebar dan tinggi di IE6, dan sangat kompatibel dengan semua browser mainstream. Pengujian model ini telah lulus sepenuhnya pada browser berikut: IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0. Untuk karya orisinal lainnya, silakan kunjungi: Bingjifeng Blog Alamat blog: http://www.cnblogs.com/binyong |
Tautan ke artikel ini: http://www.blueidea.com/tech/web/2009/6805.asp