ฉันเชื่อว่าทุกคนค่อนข้างคุ้นเคยกับการจัดการ CSS BUG ทั่วไป เช่น: IE6 Three Pixel Gap, IE5/6 Doubled Float-Margin Bug เป็นต้น แต่เรามักจะประสบปัญหา CSS BUG ที่ซับซ้อน โดยพื้นฐานแล้วสิ่งที่เรียกว่า "ซับซ้อน" หมายความว่าเงื่อนไขการทริกเกอร์นั้นซับซ้อนมากและ "BUG" ไม่ได้หมายความว่าเป็น BUG ของเบราว์เซอร์เสมอไป สำหรับปัญหาประเภทนี้ สิ่งแรกที่เราต้องแก้ไขคือวิธีค้นหาปัญหา มีเพียงการระบุตำแหน่งปัญหาอย่างรวดเร็วเท่านั้นที่เราจะสามารถแก้ไขปัญหาได้ดีขึ้น
เพื่อการวางตำแหน่งอย่างรวดเร็ว ประสบการณ์ส่วนตัวของฉันโดยทั่วไปจะเป็นดังนี้ (โดยพื้นฐานแล้วสามารถค้นหาปัญหา CSS BUG ที่ซับซ้อนได้มากกว่า 90% ที่ฉันพบใน Taobao):
1. ตรวจสอบว่าป้ายกำกับของเพจปิดอยู่หรือ
ไม่ มันอาจทำให้เกิดปัญหากับคุณได้ ปัญหา CSS BUG ที่ไม่ได้รับการแก้ไขทุกวัน แต่มันเกิดจากสิ่งนี้เท่านั้น ท้ายที่สุดแล้ว เทมเพลตเพจมักจะถูกซ้อนโดยนักพัฒนา และพวกเขาก็สามารถสร้างปัญหาดังกล่าวได้อย่างง่ายดาย
เคล็ดลับด่วน: คุณสามารถใช้ Dreamweaver เพื่อเปิดไฟล์เพื่อตรวจสอบได้ โดยทั่วไปหากไม่มีแท็กที่ปิดอยู่ แท็กเหล่านั้นจะถูกเน้นด้วยพื้นหลังสีเหลือง
2. วิธีการแยกสไตล์:
หน้าเว็บที่ซับซ้อนบางหน้าอาจโหลดไฟล์ CSS ลิงก์ภายนอก N ไฟล์ จากนั้นลบไฟล์ CSS ทีละไฟล์ ค้นหาไฟล์ CSS เฉพาะที่เรียกใช้โดย BUG และจำกัดขอบเขตการล็อคให้แคบลง
สำหรับไฟล์สไตล์ CSS ที่มีปัญหาที่เพิ่งถูกล็อค ให้ลบคำจำกัดความของสไตล์เฉพาะทีละบรรทัด ค้นหาคำจำกัดความของสไตล์ทริกเกอร์เฉพาะ และแม้แต่แอตทริบิวต์สไตล์ทริกเกอร์เฉพาะ
3. วิธีการยืนยันโมดูล
บางครั้งเราสามารถเริ่มจากองค์ประกอบ HTML ของหน้าได้เช่นกัน ลบโมดูล HTML ที่แตกต่างกันในหน้าและค้นหาโมดูล HTML ที่ทำให้เกิดปัญหา
4. ตรวจสอบว่าล้างโฟลตแล้วหรือไม่
จริงๆ แล้วมีปัญหา CSS BUG มากมายที่เกิดจากการไม่เคลียร์โฟลต จำเป็นต้องพัฒนานิสัยที่ดีในการล้างโฟลต ขอแนะนำให้ใช้วิธีการล้างโฟลตโดยไม่มีแท็ก HTML เพิ่มเติม (พยายามหลีกเลี่ยงการใช้วิธีที่คล้ายกัน เช่น overflow:hidden;zoom:1 เพื่อล้างโฟลต ซึ่งจะจำกัดเกินไป ).
5. ตรวจสอบว่า haslayout ถูกทริกเกอร์ภายใต้ IE หรือไม่
BUG CSS ที่ซับซ้อนจำนวนมากภายใต้ IE มีความสัมพันธ์อย่างใกล้ชิดกับ haslayout ที่เป็นเอกลักษณ์ของ IE การทำความคุ้นเคยและทำความเข้าใจ haslayout จะทำให้ได้ผลลัพธ์เป็นสองเท่าโดยใช้ความพยายามเพียงครึ่งหนึ่งในการจัดการกับข้อบกพร่อง CSS ที่ซับซ้อน ขอแนะนำให้อ่าน "เมื่อมีเค้าโครง" แปลโดย old9 (หากคุณไม่สามารถข้าม GFW ที่ยอดเยี่ยมได้ คุณสามารถอ่านการโพสต์ใหม่ได้บนสีน้ำเงิน)
เคล็ดลับด่วน: หากมีการทริกเกอร์ haslayout คุณสมบัติในเครื่องมือแก้ไขจุดบกพร่องของ IE แถบเครื่องมือนักพัฒนา IE จะแสดงค่า haslayout เป็น -1
6. วิธีการดีบักเส้นขอบและพื้นหลัง
ตามชื่อที่แนะนำ คือการตั้งค่าเส้นขอบหรือพื้นหลังที่เห็นได้ชัดเจน (โดยปกติจะเป็นสีดำหรือสีแดง) สำหรับองค์ประกอบสำหรับการดีบัก วิธีนี้เป็นวิธีการที่ใช้กันทั่วไปวิธีหนึ่งในการดีบัก CSS BUG และยังคงใช้ได้กับ BUG ที่ซับซ้อน ราคาไม่แพงและเป็นมิตรต่อสิ่งแวดล้อม^^
สิ่งสุดท้ายที่ฉันอยากจะเน้นย้ำกับทุกคนคือการพัฒนานิสัยการเขียนที่ดี การลดแท็กพิเศษ การพยายามสื่อความหมาย และการปฏิบัติตามมาตรฐาน สามารถช่วยให้เราประหยัดข้อผิดพลาด CSS ที่ซับซ้อนเป็นพิเศษได้บ่อยกว่านั้น มันคือเราสร้างปัญหาให้ตัวเราเอง ฉันหวังว่าทุกคนจะอยู่ห่างจากแมลงและมีชีวิตที่ดีขึ้นและดีขึ้น