แก้ไขปัญหาความเข้ากันได้ของเว็บเบราว์เซอร์เค้าโครง CSS อย่างรวดเร็วโดยไม่ต้องแฮ็ก

ความเข้ากันได้ของเบราว์เซอร์เป็นปัญหาที่พบบ่อยในเลย์เอาต์ CSS และผู้เริ่มต้นพบความเข้าใจผิดมากมายด้วยเหตุนี้ จากประสบการณ์ของฉัน ฉันจึงได้สรุป 2 วิธีเพื่อหลีกเลี่ยงปัญหาความเข้ากันได้ของเบราว์เซอร์ส่วนใหญ่

สองวิธีนี้มีข้อดีดังต่อไปนี้:

1. ไม่จำเป็นต้องใช้แฮ็ค

2. เรียบง่ายและมีประสิทธิภาพ คุณสามารถเข้าใจได้ทันที

3. เค้าโครงแบบลำดับชั้นและแบบโมดูลาร์

4. รหัสมีความสมเหตุสมผลมากกว่าและระบุได้ง่ายกว่า

วิธีที่ 1: แก้ไขการวางแนวที่ลอยตัวซึ่งเกิดจากการเพิ่มระยะห่างภายในและภายนอก

โดยปกติแล้วเราจำเป็นต้องใช้ float เพื่อลอย DIV ในรูปแบบหลายคอลัมน์ โดยปกติเราจะเขียน 3 DIV สำหรับเค้าโครง 3 คอลัมน์

เพื่อให้บรรลุผลนี้ เราจะเพิ่มระยะขอบเพื่อให้คอลัมน์สามารถเว้นระยะห่างได้โดยตรง และยังเพิ่มเส้นขอบและช่องว่างภายในเพื่อป้องกันไม่ให้ข้อความด้านในติดกับเส้นขอบ แต่มีบางอย่างที่ไม่คาดคิดเกิดขึ้น หลังจากเขียนโค้ดแล้ว สถานการณ์ต่อไปนี้ก็เกิดขึ้น:

คอลัมน์ที่สามวิ่งอยู่ด้านล่าง นี่ไม่ใช่เอฟเฟกต์ที่คุณต้องการ เรามาวิเคราะห์กันดีกว่า ทำตามแนวคิดทั่วไป ความกว้างโดยรวมคือ 800px, 200px สำหรับคอลัมน์ด้านซ้าย, 400px สำหรับคอลัมน์กลาง และ 200px สำหรับคอลัมน์ด้านขวา ซึ่งดูดี แต่จำเป็นต้องมีช่องว่างระหว่างคอลัมน์เหล่านี้ ดังนั้นคุณต้องเปลี่ยน: 190px สำหรับ คอลัมน์ด้านซ้าย 400px สำหรับคอลัมน์กลาง และ 190px สำหรับคอลัมน์ด้านขวา

แต่เพื่อให้ดูดีขึ้น คุณต้องเพิ่มเส้นขอบ แต่ฉันลืมไปว่าเส้นขอบจะเพิ่มความกว้างด้วย นอกจากนี้คุณเพิ่มช่องว่างภายในของคอลัมน์: 10px; 2=168 เพื่อไม่ให้มีการวางแนวที่ไม่ตรง แต่คุณไม่คิดว่านี่จะซับซ้อนสักหน่อยใช่ไหม บางทีคุณอาจต้องการเครื่องคิดเลข จะมีความแตกต่างในการแสดงผลของเบราว์เซอร์บางตัวที่มีเค้าโครงนี้

เอาล่ะ มาพูดถึงวิธีการของฉันกันดีกว่า ตามการแบ่งลำดับชั้น ฉันแยกเค้าโครงและการแสดงผล เลย์เอาต์หมายความว่านอกเหนือจากความกว้างและการลอยตัวแล้ว เลย์เอาต์ยังเพิ่มระยะห่างภายนอกให้มากที่สุด เพื่อให้ฉันคำนวณได้ง่ายขึ้น จากนั้นเราเพิ่ม DIV อื่นลงในคอลัมน์เค้าโครงสำหรับการแสดงเส้นขอบ ระยะห่างภายในและภายนอก ฯลฯ โดยเฉพาะ คุณไม่จำเป็นต้องกำหนดความกว้าง เพียงแค่ปรับเปลี่ยน เพื่อให้ง่ายต่อการจดจำ ฉันจึงแต่งกลอนกลอนสดขึ้นมา: ความกว้างคงที่ควรเป็นแบบลอยตัว ไม่มีเส้นขอบหรือแพตช์ ใส่ DIV เข้าไปข้างใน และสไตล์ที่กำหนดไว้ก็จะใช้งานได้!

วิธีที่ 2: แก้ไขปัญหาองค์ประกอบลอยตัวภายในหลุดออกจากชั้นนอก

ในการสร้างแค็ตตาล็อกผลิตภัณฑ์หรืออัลบั้มรูปภาพ เราใช้ UL หรือ N DIVs เพื่อลอยตัว เอฟเฟกต์ที่ต้องการมีดังนี้:

แต่กลับกลายเป็นว่าเมื่อเร็วๆ นี้ จอแสดงผลมีลักษณะดังนี้ และขอบด้านนอกได้ย้ายไปด้านบนแล้ว:

วิธีแก้ปัญหานี้ง่ายมากจริงๆ

1. คุณสามารถเพิ่ม float:left; ไปที่เลเยอร์ด้านนอกเพื่อแก้ไขปัญหา

2. อีกวิธีหนึ่งคือการวาง DIV ที่ส่วนท้ายเพื่อล้างโฟลตหลังจากที่โฟลตสิ้นสุดลง

3. เพิ่มความสูงหรือความกว้างให้กับชั้นนอก