องค์ประกอบ <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> คือ 0 ในเวลานี้ความกว้างของ <body> ก็ยุบเป็น 0
ประการที่สองการตั้งค่าความกว้างและความสูงของ <html> จะส่งผลกระทบต่อการอ้างอิงเปอร์เซ็นต์ของ <body> (หรือบล็อกที่มี <body>)
ในทิศทาง y หากความสูงของ <html> เป็นค่าเริ่มต้นอัตโนมัติค่าความสูงของ <body> จะถูกละเว้นหากใช้ค่าเปอร์เซ็นต์ แต่เมื่อค่าความสูงของ <html> มีความสูงเฉพาะแม้ว่าจะเป็น 0 ความสูงเปอร์เซ็นต์ของ <body> จะถูกนำไปใช้ แต่สิ่งที่แปลกคือการอ้างอิงการคำนวณสำหรับความสูงเปอร์เซ็นต์นี้ไม่ใช่ความสูงของ <html> เพียงแค่ตั้งค่า แต่ผลรวมของระยะขอบ+ความสูงของพรมแดน+ความสูงของความสูงของพื้นที่การดูลบลบ <html>
ในทิศทาง x หากความกว้างใช้ค่าเริ่มต้นอัตโนมัติและความกว้างเปอร์เซ็นต์ของ <body> จะไม่ถูกละเว้น แต่การอ้างอิงการคำนวณของมันยังคงแปลกเท่ากับทิศทาง y การลบผลรวมของระยะขอบ+ความกว้าง border+bordding ของ <html> สำหรับความกว้างของวิวพอร์ต หากความกว้างมีค่าที่เฉพาะเจาะจงจะถูกแทนที่ด้วยการอ้างอิงความกว้างเปอร์เซ็นต์สำหรับ <body>
อีกครั้งเมื่อ <body> ถูกตั้งค่าเป็นตำแหน่ง: สัมบูรณ์สีชายแดนของ <html> จะไม่ถูกต้อง นี่เป็นข้อผิดพลาดที่แปลกอีกประการหนึ่ง
ในที่สุดบล็อกที่มีอยู่เริ่มต้นใช้สี่เหลี่ยมมุมมองวิวพอร์ตซึ่งเป็นเรื่องปกติ แต่มันเป็นไปไม่ได้ที่จะสร้างบล็อกที่มีองค์ประกอบที่อยู่ในตำแหน่งอย่างแน่นอน แต่บางทีบล็อกที่มีอยู่ที่สร้างขึ้นโดย <html> คือสี่เหลี่ยมผืนผ้าวิวพอร์ตใครจะรู้
มันยุ่งมาก มันไม่เพียง แต่เป็นหัวใหญ่ แต่ยังเป็นหัวใหญ่หลังจากคัดออก ฉันไม่รู้ว่าคุณสามารถมองเห็นได้อย่างชัดเจนหลังจากมองย้อนกลับไปในอนาคต ie7 ah ie7 ... มันไม่ง่ายเลยที่จะบอกว่ารักคุณ ...
โหมด IE5 และ Quirks◎ <html> และ <body> การตั้งค่าความกว้างและความสูงทั้งหมดจะถูกละเว้นและยังคงเต็มไปด้วยวิวพอร์ต
◎ <html> การตอบสนองและระยะขอบไม่ได้รับการยอมรับ
◎ <body> ยอมรับการขยายและระยะขอบ แต่ระยะขอบลบไม่มีผลกระทบทางสายตา แต่จะถูกนำเข้ามาเมื่อคำนวณพารามิเตอร์อื่น ๆ ที่เกี่ยวข้อง
◎ <body> เส้นขอบพื้นหลังและแอตทริบิวต์อื่น ๆ จะถูกถ่ายโอนขึ้นไปยังองค์ประกอบ <html>
◎บล็อกเริ่มต้นที่มีอยู่คือขอบช่องว่างของ <body>
ความมีประโยชน์บทสรุปนี้มาจากปัญหาเลย์เอาต์ในตอนต้น ปัญหาเลย์เอาต์เป็นหนึ่งในการใช้งาน ฉันจะเขียนโพสต์ใหม่เพื่อจัดเรียงในภายหลัง แต่เค้าโครงนั้นใช้คุณสมบัติเพียงไม่กี่อย่างเท่านั้นและควรมีศักยภาพในการแตะมากขึ้นดังนั้นศึกษาอย่างช้าๆ