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, dan memiliki beberapa properti yang sangat istimewa. Mari kita ringkas untuk referensi:
IE6 Mode Standar:◎ Tidak peduli berapa tinggi dan lebar yang ditetapkan untuk itu, ukurannya selalu mengisi 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 khusus dengan tinggi: 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> lebih sederhana dalam arah Y, mirip dengan pemahaman IE6 tentang tinggi elemen normal - 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 ke 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: Jika lebar <HTML> adalah semua nilai selain nilai non-0 (termasuk nilai otomatis nilai 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 mengisi ruang konten <html>.
3. Jika <body> sendiri memiliki karakteristik menyusut dan di sekitarnya, seperti pengaturan posisi: absolut atau tampilan: inline (anehnya, float 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 a strange 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 2nd point in the Kasus Pertama - Ruang konten yang penuh dengan <Html>. Karena lebar <html> adalah 0 saat ini, lebar <body> juga runtuh menjadi 0.
Kedua, pengaturan lebar dan tinggi <html> akan secara aneh mempengaruhi referensi persentase <body> (atau blok yang mengandung <body>).
Dalam arah Y, jika ketinggian <HTML> adalah nilai otomatis, maka ketinggian <body> akan diabaikan jika mengambil nilai persentase. 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 margin+batas+ketinggian padding tinggi area tontonan minus <html>.
Dalam arah X, jika lebar mengambil nilai default otomatis, dan lebar persentase <body> tidak akan diabaikan, tetapi referensi perhitungannya masih aneh seperti arah y, mengurangi jumlah margin+batas+lebar padding <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 aneh 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 ... tidak mudah untuk mengatakan bahwa mencintaimu ...
IE5 dan Mode Quirks◎ <html> dan <day> Semua pengaturan lebar dan tinggi diabaikan dan tetap penuh dengan viewports.
◎ <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.