แม้ว่าเบราว์เซอร์อาจมีข้อบกพร่องมากมาย แต่ก็ไม่ได้หมายความว่าจะมีข้อบกพร่องเมื่อคุณรู้สึกแตกต่าง ปัญหาอาจมีสาเหตุหลายประการ ดังนั้นผู้ผลิตจึงจำเป็นต้องมีวิธีการบางอย่างในการแก้ไขปัญหา
ควรเลือกเบราว์เซอร์ขั้นสูงสำหรับการทดสอบ เช่น Opera 9.2, Firefox 2.0 หรือ Safari 3.0 ซึ่งรองรับ CSS 2.1 ได้ดีกว่า อย่าใช้ IE 6 เป็นเบราว์เซอร์ทดสอบเพียงตัวเดียว เนื่องจาก IE 6 มีปัญหามากที่สุด ซึ่งส่งผลเสียอย่างมากสำหรับผู้ผลิต (โดยเฉพาะผู้เริ่มต้น) ในการทำความเข้าใจข้อกำหนดของ CSS 2.1 และพิจารณาว่าประสิทธิภาพของเบราว์เซอร์นั้นถูกต้องหรือไม่
หากการทดสอบถูกต้องในเบราว์เซอร์ขั้นสูง แต่มีปัญหาใน IE โดยทั่วไปสามารถระบุได้ว่าปัญหาคือ IE
หากการแสดงผลในเบราว์เซอร์ขั้นสูงไม่ถูกต้อง คุณสามารถตัดสินเบื้องต้นได้ดังต่อไปนี้:
1. ไม่ว่าการสะกดถูกต้องหรือไม่ คุณสามารถใช้การตรวจสอบ W3C หรือฟังก์ชันการตรวจสอบของซอฟต์แวร์แก้ไขหน้าเว็บเพื่อตรวจสอบว่าแท็กในเอกสาร (X)HTML ตรงกันหรือไม่ ลำดับการซ้อนถูกต้องหรือไม่ ไม่ว่าจะเป็นแท็กว่างหรือไม่ ถูกปิด และการสะกด CSS ถูกต้องหรือไม่ การซ้อนที่ไม่ถูกต้องและการสะกดที่ไม่ถูกต้องถือเป็นข้อผิดพลาดที่พบบ่อยมาก
เคล็ดลับ: ขณะนี้มีซอฟต์แวร์แก้ไขจำนวนมากที่สามารถให้ฟังก์ชันการตรวจสอบ (X)HTML และ CSS รวมถึงว่าเบราว์เซอร์รองรับแอตทริบิวต์ CSS หรือไม่ เป็นต้น ตัวอย่างเช่น: Dreamweaver 8 หรือสูงกว่า, TopStyle และซอฟต์แวร์อื่นๆ
เคล็ดลับ: ซอฟต์แวร์เสริม "Firebug" ใน Firefox เป็นเครื่องมือที่มีประโยชน์มาก ไม่เพียงแต่สามารถตรวจสอบได้ว่า (X)HTML, CSS และ JavaScript ถูกต้องหรือไม่ แต่ยังแสดงเฟรมและตำแหน่งขององค์ประกอบในหน้าเว็บแบบไดนามิกอีกด้วย ดีมากสำหรับการดีบักปลั๊กอินเสริม
2. มี DTD ที่เหมาะสมหรือไม่?
ในบทอื่นๆ ของหนังสือเล่มนี้ มีการเน้นย้ำถึงความสำคัญของ DOCTYPE มากกว่าหนึ่งครั้ง DOCTYPE ที่แตกต่างกันส่งผลโดยตรงต่อการตีความ (X)HTML และ CSS ของเบราว์เซอร์
3. เบราว์เซอร์รองรับคุณลักษณะ CSS หรือไม่ แม้ว่าเบราว์เซอร์สมัยใหม่จะรองรับข้อกำหนด CSS 2.1 ส่วนใหญ่และข้อกำหนด CSS 3 บางอย่าง ตามที่แนะนำในบทที่แล้ว แต่เบราว์เซอร์บางคุณลักษณะยังไม่ได้รับการสนับสนุนอย่างกว้างขวาง ดังนั้นในเมื่อคุณลักษณะบางอย่างไม่รองรับ ไม่มีผล โปรดยืนยันว่าเบราว์เซอร์รองรับหรือไม่
4. แยกปัญหาเพื่อเน้นส่วนที่เป็นปัญหา เช่น การเพิ่มเส้นขอบหรือสีพื้นหลังที่โดดเด่นให้กับองค์ประกอบ
หากการเพิ่มเส้นขอบช่วยแก้ปัญหาได้ แสดงว่าเป็นปัญหาระยะขอบที่ทับซ้อนกัน
หากมีการเพิ่มพื้นหลังแต่พื้นหลังไม่แสดง อาจเป็นเพราะคุณสมบัติพิเศษหรือองค์ประกอบลอยไม่ได้ปิด
ลองแก้ไขคุณลักษณะบางอย่าง โดยเฉพาะคุณลักษณะที่ทริกเกอร์ hasLayout ของ IE เพื่อพิจารณาว่าเป็นข้อบกพร่องทั่วไปใน IE หรือไม่
5. ตั้งค่าการทดสอบพื้นฐาน หากไม่สามารถแก้ปัญหาได้ คุณสามารถคัดลอกไฟล์ปัญหาและลบ (X)HTML ส่วนเกินออก เหลือเพียงส่วนที่มีปัญหาเท่านั้น
ลบปัญหาความคิดเห็นภายใน (X)HTML และดูว่าปัญหาหายไปหรือไม่
ลบช่องว่างระหว่างองค์ประกอบและดูว่าปัญหาหายไปหรือไม่
จากนั้นใส่ความคิดเห็นในสไตล์ชีตเป็นบล็อกๆ จนกว่าปัญหาจะหายไป จากนั้นสไตล์ที่เพิ่งใส่ความคิดเห็นลงไปก็คือปัญหา
6. แก้ไขปัญหามากกว่าแก้ปรากฏการณ์ การค้นหาต้นตอของปัญหาและการแก้ปัญหาคือเป้าหมายสูงสุด แทนที่จะใช้แฮ็กที่ซับซ้อนเพื่อทำให้หน้าเว็บ "ดูสวยงาม" เพียงเพื่อรองรับประสิทธิภาพ หากคุณไม่แก้ไขปัญหาตั้งแต่ต้น คุณอาจพบปัญหาเพิ่มเติมเมื่ออัปเกรดเบราว์เซอร์ ในเวลาเดียวกัน การแฮ็กอาจทำให้เกิดปัญหาใหม่เกิดขึ้น โดยเฉพาะอย่างยิ่งการทริกเกอร์หรือการหลีกเลี่ยงการทริกเกอร์แอตทริบิวต์ hasLayout ของ IE
วิธีคิดอีกวิธีหนึ่งอาจสามารถหลีกเลี่ยงปัญหาได้ เช่น การยกเลิกแอตทริบิวต์ระยะขอบขององค์ประกอบ และการตั้งค่าแอตทริบิวต์การเติมขององค์ประกอบหลักแทน
ใช้ Hack เฉพาะเมื่อไม่สามารถแก้ไขได้จริงๆ