การสร้างหน้าเว็บ: สรุปข้อผิดพลาด DIV+CSS ทั่วไป 10 ข้อ
ผู้เขียน：Eve Cole
เวลาอัปเดต：2009-06-12 17:53:00
1. ตรวจสอบว่ามีการสะกดผิดในองค์ประกอบ HTML หรือไม่ และลืมแท็กปิดหรือไม่
แม้แต่ผู้ใช้ที่มีประสบการณ์ก็มักจะเข้าใจผิดเรื่องการซ้อน div คุณสามารถใช้ฟังก์ชันการตรวจสอบของ Dreamweaver เพื่อตรวจสอบข้อผิดพลาดได้
2. ตรวจสอบว่า CSS ถูกต้องหรือไม่
ตรวจสอบการสะกดผิด ลืม } ในตอนท้าย ฯลฯ คุณสามารถใช้ CleanCSS เพื่อตรวจสอบ CSS เพื่อหาข้อผิดพลาดในการสะกดคำ CleanCSS เป็นเครื่องมือในการลดน้ำหนักสำหรับ CSS แต่ยังสามารถตรวจสอบข้อผิดพลาดในการสะกดได้อีกด้วย
3. พิจารณาว่าข้อผิดพลาดเกิดขึ้นที่ใด
หากข้อผิดพลาดส่งผลกระทบต่อเค้าโครงโดยรวม คุณสามารถลบบล็อก div ทีละบล็อกได้จนกว่าจอแสดงผลจะกลับมาเป็นปกติหลังจากลบบล็อก div บางส่วน และคุณสามารถระบุได้ว่าเกิดข้อผิดพลาดที่ใด
4. ใช้แอตทริบิวต์เส้นขอบเพื่อกำหนดลักษณะโครงร่างขององค์ประกอบข้อผิดพลาด
การใช้โครงร่างแอตทริบิวต์ float อาจทำให้เกิดข้อผิดพลาดได้หากคุณไม่ระวัง ในขณะนี้ ให้เพิ่มแอตทริบิวต์ border ให้กับองค์ประกอบเพื่อกำหนดขอบเขตขององค์ประกอบ และสาเหตุของข้อผิดพลาดจะถูกเปิดเผย
5. องค์ประกอบหลักขององค์ประกอบ float ไม่สามารถระบุแอตทริบิวต์ที่ชัดเจนได้
ภายใต้ MacIE หากคุณใช้แอตทริบิวต์ clear บนองค์ประกอบหลักขององค์ประกอบ float เค้าโครงขององค์ประกอบ float โดยรอบจะวุ่นวาย นี่คือแมลงชื่อดังของ MacIE หากคุณไม่รู้ คุณจะต้องเบี่ยงทาง
6. องค์ประกอบ float จะต้องระบุแอตทริบิวต์ width
เบราว์เซอร์จำนวนมากมีข้อบกพร่องเมื่อแสดงองค์ประกอบลอยที่มีความกว้างที่ไม่ระบุ ดังนั้นไม่ว่าเนื้อหาขององค์ประกอบ float จะเป็นเช่นไร จะต้องระบุแอตทริบิวต์ width ให้กับองค์ประกอบนั้น
นอกจากนี้ ให้ลองใช้ em แทน px เป็นหน่วยเมื่อระบุองค์ประกอบ
7. องค์ประกอบลอยตัวไม่สามารถระบุคุณลักษณะ เช่น ระยะขอบและช่องว่างภายในได้
IE มีข้อบกพร่องเมื่อแสดงองค์ประกอบลอยโดยระบุระยะขอบและช่องว่างภายใน ดังนั้น อย่าระบุแอตทริบิวต์ระยะขอบและช่องว่างภายในองค์ประกอบ float (คุณสามารถซ้อน div ภายในองค์ประกอบ float เพื่อตั้งค่าระยะขอบและช่องว่างภายในได้) คุณยังสามารถใช้แฮ็กเพื่อระบุค่าพิเศษสำหรับ IE ได้
8. ผลรวมของความกว้างขององค์ประกอบลอยต้องน้อยกว่า 100%
หากผลรวมของความกว้างขององค์ประกอบ float เท่ากับ 100% พอดี เบราว์เซอร์รุ่นเก่าบางตัวจะแสดงไม่ถูกต้อง ดังนั้น โปรดตรวจสอบให้แน่ใจว่าผลรวมของความกว้างน้อยกว่า 99%
9. คุณได้รีเซ็ตสไตล์เริ่มต้นแล้วหรือยัง?
คุณลักษณะบางอย่าง เช่น Margin, Padding ฯลฯ จะถูกตีความแตกต่างกันไปตามเบราว์เซอร์ต่างๆ ดังนั้นจึงเป็นการดีที่สุดที่จะตั้งค่าระยะขอบและช่องว่างภายในทั้งหมดเป็น 0 รูปแบบรายการเป็นไม่มี ฯลฯ ก่อนการพัฒนา
10. คุณลืมเขียน DTD หรือไม่?
หากผลลัพธ์การแสดงผลของเบราว์เซอร์ต่างๆ ยังคงแตกต่างกันไม่ว่าคุณจะปรับเปลี่ยนอย่างไร คุณสามารถตรวจสอบได้ว่าคุณลืมเขียนบรรทัด DTD ต่อไปนี้ที่ตอนต้นของหน้าหรือไม่:
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">
