Elemen <html>, elemen root dalam dokumen XHTML, sangat akrab. Namun, saya telah mencoba membuat tata letak baru -baru ini dan menemukan bahwa di IE, itu bukan peran yang sederhana, dengan beberapa "kodrat" yang luar biasa. Mari kita ringkas untuk referensi:
IE6 Mode Standar:◎ Tidak peduli berapa tinggi dan lebar yang ditetapkan untuk itu, ukurannya selalu mencakup seluruh area tampilan.
◎ Tidak peduli apa pun bantalan dan perbatasan yang ditetapkan untuknya, ukuran dan ukuran selalu mengisi seluruh area tampilan.
◎ Margin akan diabaikan.
◎ Blok yang mengandung awal adalah lebar perbatasan dari area tampilan persegi panjang minus <html>
Menggunakan CSS3 untuk mengekspresikannya, kita dapat menganggap <Html> di IE6 sebagai elemen tinggi yang luar biasa: 100%; Lebar: 100%; Ukuran kotak: kotak perbatasan; dan atribut ini tidak dapat diubah.
IE7 Mode Standar:Meskipun IE7 telah memperbaiki beberapa bug CSS di IE6, pemahaman <Html> jauh lebih rumit daripada IE6. Meskipun IE6 aneh, ada beberapa atribut yang dapat diubah, jadi masih sederhana. IE7 <html> dapat menerima lebih banyak atribut, tetapi algoritma tidak mengikuti spesifikasi dan jujur, jadi jauh lebih merepotkan untuk mengetahuinya daripada IE6.
Yang pertama adalah fitur ekspansi otomatis.
Elemen <html> sederhana dalam arah Y, dan mirip dengan pemahaman IE6 tentang ketinggian elemen biasa - jika ketinggian konten melebihi ketinggian <html>, atau jika <html> tidak memiliki ketinggian tetap (mis. Nilai default otomatis), maka <Html> akan secara otomatis memperluas ketinggiannya sendiri untuk memasukkan konten.
Tetapi dalam arah X, masalah terutama berfokus pada pemahaman lebar <body>. Berikut adalah dua situasi: (bukankah itu mengatakan <html>? Mengapa Anda berbicara tentang lebar <body>? Karena jika <Html> ingin mengembang secara otomatis, Anda harus tahu seberapa lebar <tody> yang harus diperluas.)
Kasus pertama: Lebar <Html> Jika nilai apa pun selain nilai selain nilai yang bukan 0 (termasuk nilai default otomatis), maka lebar <body> ditentukan oleh aturan berikut:
1. Jika lebar <body> adalah nilai tetap, maka ada begitu banyak lebar.
2. Jika lebar <body> adalah nilai default otomatis, lebar akan menutupi ruang konten <html>.
3. Jika <body> sendiri memiliki karakteristik menyusut dan di sekitarnya, seperti pengaturan posisi: absolut atau tampilan: inline (hal yang aneh mengambang tetapi tidak memenuhi item ini, itu memuaskan 2), maka itu tergantung pada lebar konten.
The second case: If the width of <html> is 0, then the 1st and 3rd points are the same as above, and the 2nd point, if the width of <body> is the default value auto, the width will adapt to the content, but there is an amazing phenomenon, that is, if <body> has a border or padding that is not 0 at the same time, its width will not adapt to the content and will become the second point in the first case - Ruang konten <html> ditutupi dengan <Html>. Karena lebar <html> adalah 0 saat ini, lebar <body> juga runtuh menjadi 0.
Kedua, pengaturan lebar dan tinggi <html> akan secara mengejutkan mempengaruhi referensi persentase <body> (atau blok yang mengandung <driber>.
Dalam arah Y, jika ketinggian <HTML> adalah nilai default otomatis, maka jika ketinggian <body> mengambil nilai persentase, itu akan diabaikan. Tetapi begitu nilai ketinggian <HTML> memiliki ketinggian tertentu, bahkan jika itu 0, persentase tinggi <body> akan diterapkan. Tapi yang aneh adalah bahwa referensi perhitungan untuk tinggi persentase ini bukanlah ketinggian <html> yang saja diatur, tetapi jumlah ketinggian bantalan perbatasan margin dari ketinggian area tampilan dikurangi <html>.
Dalam arah X, jika lebar mengambil nilai default otomatis, dan arah Y berbeda, lebar persentase <body> tidak akan diabaikan, tetapi referensi perhitungannya masih aneh seperti arah Y, mengurangi jumlah lebar bantalan perbatasan margin <html> untuk lebar viewport. Jika lebar memiliki nilai spesifik, itu akan diganti sebagai referensi persentase lebar untuk <body>.
Sekali lagi, ketika <body> diatur ke posisi: absolut, warna perbatasan <html> tidak akan valid. Ini adalah bug luar biasa lainnya.
Akhirnya, blok yang mengandung awal mengadopsi persegi panjang viewport, yang pada dasarnya normal. Tetapi tidak mungkin untuk membuat blok yang berisi dengan elemen yang diposisikan yang benar -benar diposisikan. Tapi mungkin blok berisi yang dibuat oleh <Html> adalah persegi panjang viewport, siapa tahu.
Sangat berantakan. Ini bukan hanya kepala besar tetapi juga kepala besar setelah menyelesaikannya. Saya tidak tahu apakah Anda dapat melihatnya dengan jelas setelah melihat ke masa depan. IE7 AH IE7 ... Saya ingin mengatakan saya sangat mencintaimu ...
IE5 dan Mode Quirks◎ <html> dan <day> Semua pengaturan lebar dan tinggi diabaikan dan tetap penuh dengan area tampilan.
◎ <html> padding dan margin tidak diterima.
◎ <body> Terima padding dan margin, tetapi margin negatif tidak memiliki efek visual, tetapi akan dibawa ketika menghitung parameter lain yang sesuai.
Perbatasan, latar belakang dan atribut lainnya akan ditransfer ke atas ke elemen <Html>.
◎ Blok yang mengandung awal adalah tepi bantalan <body>.
kegunaanRingkasan ini berasal dari masalah tata letak di awal. Masalah tata letak adalah salah satu kegunaannya. Saya akan menulis ulang posting untuk menyelesaikannya nanti. Tapi tata letak itu hanya menggunakan beberapa fitur, dan harus ada lebih banyak potensi untuk mengetuk, jadi pelajari perlahan.