องค์ประกอบ <html> องค์ประกอบรูทในเอกสาร XHTML คุ้นเคยเป็นอย่างมาก อย่างไรก็ตามฉันได้พยายามสร้างเลย์เอาต์เมื่อเร็ว ๆ นี้และพบว่าใน IE มันไม่ใช่บทบาทที่เรียบง่ายด้วย "ธรรมชาติ" ที่ไม่ธรรมดา มาสรุปเพื่ออ้างอิง:
โหมดมาตรฐาน IE6:◎ไม่ว่าจะตั้งค่าความสูงและความกว้างขนาดใดขนาดของมันจะครอบคลุมพื้นที่การดูทั้งหมดเสมอ
◎ไม่ว่าจะมีการตั้งช่องว่างและเส้นขอบแบบไหนสำหรับเขาขนาดและขนาดจะเติมเต็มพื้นที่การดูทั้งหมด
margin จะถูกละเว้น
◎บล็อกเริ่มต้นที่มีอยู่คือความกว้างของเส้นขอบของพื้นที่มุมมองสี่เหลี่ยมผืนผ้าลบ <html>
การใช้ CSS3 เพื่อแสดงออกเราสามารถพิจารณา <html> ใน IE6 เป็นองค์ประกอบพิเศษของความสูง: 100%; ความกว้าง: 100%; การปรับขนาดกล่อง: กล่องชายแดน; และคุณลักษณะเหล่านี้ไม่เปลี่ยนรูป
โหมดมาตรฐาน IE7:แม้ว่า IE7 ได้แก้ไขข้อบกพร่อง CSS หลายตัวใน IE6 แต่ความเข้าใจของ <html> นั้นซับซ้อนกว่า IE6 มาก แม้ว่า IE6 จะแปลก แต่ก็มีคุณลักษณะบางอย่างที่สามารถเปลี่ยนแปลงได้ดังนั้นจึงยังง่าย IE7's <html> สามารถยอมรับคุณลักษณะที่มากขึ้นได้ แต่อัลกอริทึมไม่เป็นไปตามข้อกำหนดและเป็นจริงดังนั้นจึงเป็นเรื่องยากที่จะคิดออกมากกว่า IE6
อย่างแรกคือคุณสมบัติการขยายตัวอัตโนมัติ
องค์ประกอบ <html> นั้นง่ายในทิศทาง y และคล้ายกับความเข้าใจของ IE6 เกี่ยวกับความสูงขององค์ประกอบทั่วไป - หากความสูงของเนื้อหาสูงกว่าความสูงของ <html> หรือถ้า <html> ไม่มีความสูงคงที่ (เช่นค่าเริ่มต้นอัตโนมัติ) จากนั้น <html> โดยอัตโนมัติจะขยายความสูงของตัวเอง
แต่ในทิศทาง x ปัญหาส่วนใหญ่มุ่งเน้นไปที่ความเข้าใจความกว้างของ <body> นี่คือสองสถานการณ์: (มันไม่ได้บอกว่า <html> ทำไมคุณถึงพูดถึงความกว้างของ <body> เพราะถ้า <html> ต้องการขยายโดยอัตโนมัติคุณต้องรู้ว่า <body> ขยายกว้างแค่ไหน)
กรณีแรก: ความกว้างของ <html> หากเป็นค่าใด ๆ นอกเหนือจากค่าอื่นนอกเหนือจากค่าที่ไม่ใช่ 0 (รวมถึงค่าเริ่มต้นอัตโนมัติ) ดังนั้นความกว้างของ <body> จะถูกกำหนดโดยกฎต่อไปนี้:
1. หากความกว้างของ <body> เป็นค่าคงที่แสดงว่ามีความกว้างมาก
2. หากความกว้างของ <body> เป็นค่าเริ่มต้นอัตโนมัติความกว้างจะครอบคลุมพื้นที่เนื้อหาของ <html>
3. ถ้า <body> ตัวเองมีการหดตัวและลักษณะโดยรอบเช่นตำแหน่งการตั้งค่า: สัมบูรณ์หรือจอแสดงผล: อินไลน์ (สิ่งแปลก ๆ คือลอย แต่ไม่ตอบสนองรายการนี้มันเป็นไปตาม 2) มันขึ้นอยู่กับความกว้างของเนื้อหา
กรณีที่สอง: หากความกว้างของ <html> คือ 0 ดังนั้นจุดที่ 1 และ 3 จะเหมือนกับด้านบนและจุดที่ 2 ถ้าความกว้างของ <body> เป็นค่าเริ่มต้นอัตโนมัติความกว้างจะปรับให้เข้ากับเนื้อหาได้ในเวลาเดียวกัน พื้นที่เนื้อหาของ <html> ถูกปกคลุมด้วย <html> เนื่องจากความกว้างของ <html> คือ 0 ในเวลานี้ความกว้างของ <body> ก็ยุบเป็น 0
ประการที่สองการตั้งค่าความกว้างและความสูงของ <html> จะส่งผลกระทบอย่างน่าประหลาดใจต่อการอ้างอิงเปอร์เซ็นต์ของ <body> (หรือ <body> ที่มีบล็อก)
ในทิศทาง y หากความสูงของ <html> เป็นค่าเริ่มต้นอัตโนมัติจากนั้นหากความสูงของ <body> ใช้ค่าเปอร์เซ็นต์มันจะถูกละเว้น แต่เมื่อค่าความสูงของ <html> มีความสูงเฉพาะแม้ว่าจะเป็น 0 ความสูงเปอร์เซ็นต์ของ <body> จะถูกนำไปใช้ แต่สิ่งที่แปลกคือการอ้างอิงการคำนวณสำหรับความสูงเปอร์เซ็นต์นี้ไม่ใช่ความสูงของ <html> เพียงแค่ตั้งค่า แต่ผลรวมของความสูงของช่องขอบขอบขอบขอบของความสูงของพื้นที่มุมมองลบลบ <html>
ในทิศทาง x หากความกว้างใช้ค่าเริ่มต้นอัตโนมัติและทิศทาง y นั้นแตกต่างกันความกว้างเปอร์เซ็นต์ของ <body> จะไม่ถูกเพิกเฉย แต่การอ้างอิงการคำนวณของมันยังคงแปลกเท่ากับทิศทาง y การลบผลรวมของความกว้างของขอบขอบขอบขอบของ <HTML> สำหรับความกว้างของวิวพอร์ต หากความกว้างมีค่าที่เฉพาะเจาะจงจะถูกแทนที่ด้วยการอ้างอิงความกว้างเปอร์เซ็นต์สำหรับ <body>
อีกครั้งเมื่อ <body> ถูกตั้งค่าเป็นตำแหน่ง: สัมบูรณ์สีชายแดนของ <html> จะไม่ถูกต้อง นี่เป็นข้อผิดพลาดที่น่าทึ่งอีกประการหนึ่ง
ในที่สุดบล็อกที่มีอยู่เริ่มต้นใช้สี่เหลี่ยมมุมมองวิวพอร์ตซึ่งเป็นเรื่องปกติ แต่มันเป็นไปไม่ได้ที่จะสร้างบล็อกที่มีองค์ประกอบที่อยู่ในตำแหน่งอย่างแน่นอน แต่บางทีบล็อกที่มีอยู่ที่สร้างขึ้นโดย <html> คือสี่เหลี่ยมผืนผ้าวิวพอร์ตใครจะรู้
มันยุ่งมาก มันไม่เพียง แต่เป็นหัวใหญ่ แต่ยังเป็นหัวใหญ่หลังจากคัดออก ฉันไม่รู้ว่าคุณสามารถมองเห็นได้อย่างชัดเจนหลังจากมองย้อนกลับไปในอนาคต ie7 ah ie7 ... ฉันอยากจะบอกว่าฉันรักคุณมาก ...
โหมด IE5 และ Quirks◎ <html> และ <body> การตั้งค่าความกว้างและความสูงทั้งหมดจะถูกละเว้นและยังคงเต็มไปด้วยพื้นที่ดู
◎ <html> การตอบสนองและระยะขอบไม่ได้รับการยอมรับ
◎ <body> ยอมรับการขยายและระยะขอบ แต่ระยะขอบลบไม่มีผลกระทบทางสายตา แต่จะถูกนำเข้ามาเมื่อคำนวณพารามิเตอร์อื่น ๆ ที่เกี่ยวข้อง
◎ <body> เส้นขอบพื้นหลังและแอตทริบิวต์อื่น ๆ จะถูกถ่ายโอนขึ้นไปยังองค์ประกอบ <html>
◎บล็อกเริ่มต้นที่มีอยู่คือขอบช่องว่างของ <body>
ความมีประโยชน์บทสรุปนี้มาจากปัญหาเลย์เอาต์ในตอนต้น ปัญหาเลย์เอาต์เป็นหนึ่งในการใช้งาน ฉันจะเขียนโพสต์ใหม่เพื่อจัดเรียงในภายหลัง แต่เค้าโครงนั้นใช้คุณสมบัติเพียงไม่กี่อย่างเท่านั้นและควรมีศักยภาพในการแตะมากขึ้นดังนั้นศึกษาอย่างช้าๆ