1.โครงร่าง
เมื่อแก้ไขข้อบกพร่อง CSS ฉันมักจะเพิ่มเส้นขอบให้กับองค์ประกอบเฉพาะเพื่อดูว่าเกิดอะไรขึ้นกับองค์ประกอบนั้นและช่วยระบุแหล่งที่มาของปัญหา ซึ่งมักจะได้ผลเพราะมันทำให้ฉันมองเห็นเค้าโครงที่เฉพาะเจาะจงมากขึ้น แต่ถ้าเป็นองค์ประกอบระดับบล็อก อาจมีข้อผิดพลาดเกิดขึ้น การเพิ่มเส้นขอบ 1px ให้กับองค์ประกอบระดับบล็อกมีแนวโน้มที่จะส่งผลต่อเลย์เอาต์ด้วยการทำให้องค์ประกอบกว้างขึ้น 2px
คุณสมบัติเค้าร่างเป็นการทดแทนที่สมบูรณ์แบบเนื่องจากทำให้วัตถุไม่กระทบต่อการไหลของเอกสาร อย่างไรก็ตาม IE6 และ IE7 ไม่รองรับแอตทริบิวต์เค้าร่าง ดังนั้นจึงไม่สามารถใช้สำหรับการดีบักในเบราว์เซอร์ทั้งสองนี้ได้
2. สืบทอด (มูลค่า)
มีตัวอย่างมากมายในการพัฒนา CSS: ด้วยการตั้งค่าสไตล์บางอย่างในองค์ประกอบเฉพาะเพื่อบอกให้องค์ประกอบนั้น "สืบทอด" คุณสมบัติที่เพิ่มเข้ามาทั้งหมดขององค์ประกอบหลัก คุณสามารถหลีกเลี่ยงการป้อนข้อมูลด้วยแป้นพิมพ์จำนวนมากได้
สามารถทำได้ง่ายๆ โดยการตั้งค่าการสืบทอด นี่อาจเป็นประโยชน์ ตัวอย่างเช่น เมื่อแทนที่แอตทริบิวต์พื้นหลัง มักจะมีข้อความจำนวนมากในแอตทริบิวต์ (สี, URL ของรูปภาพ, ตำแหน่ง ฯลฯ) ดังนั้น แทนที่จะเขียนค่าเหล่านี้ใหม่ คุณอาจต้องการให้องค์ประกอบที่เป็นปัญหามีคุณสมบัติพื้นหลังเหมือนกับพาเรนต์ และค่าที่สืบทอดจะช่วยได้ ซึ่งเห็นได้ชัดว่าช่วยประหยัดการพิมพ์ของแป้นพิมพ์ได้มาก
ขออภัย IE6 และ IE7 ไม่รองรับค่าที่สืบทอดมา (ยกเว้นทิศทาง (ทิศทางของข้อความ) และคุณสมบัติการมองเห็น)
3. เซลล์ว่าง
คุณลักษณะนี้ใช้สำหรับตารางหรือองค์ประกอบที่มีการตั้งค่าแอตทริบิวต์ "display" เป็น "table-cell" เท่านั้น หากคุณเพิ่มเนื้อหาลงในตารางแบบไดนามิก คุณอาจพบสถานการณ์ที่เนื้อหาของเซลล์บางเซลล์ว่างเปล่า และคุณไม่ต้องการให้เส้นขอบ สีพื้นหลัง รูปภาพพื้นหลัง ฯลฯ ของเซลล์ว่างนี้ถูกซ่อน
การใช้ "เซลล์ว่าง: ซ่อน" สามารถแก้ปัญหานี้ได้ ซึ่งจะซ่อนเซลล์ที่อาจเกิดสถานการณ์นี้โดยสมบูรณ์
Internet Explorer ไม่สนับสนุนแอตทริบิวต์เซลล์ว่าง
4.คำอธิบายภาพด้านข้าง
เมื่อพูดถึงแอตทริบิวต์ของตาราง คุณลักษณะนี้ใช้เพื่อประกาศชื่อตารางที่แสดงในคอลัมน์ด้านข้างของตาราง ยอมรับค่าสี่ค่า: บน, ล่าง, ซ้ายและขวา Internet Exporer ไม่รองรับแอตทริบิวต์นี้ ชื่อตารางจะปรากฏที่ด้านบนของตารางใน IE6 และ IE7 เสมอ
5. ตัวนับเพิ่ม/ตัวนับรีเซ็ต
รายการที่เรียงลำดับ (
) มีความสะดวกมาก เนื่องจากช่วยให้คุณไม่ต้องยุ่งยากในการเพิ่มตัวเลขทีละน้อย และช่วยให้คุณเปลี่ยนลำดับของรายการโดยไม่ต้องเปลี่ยนตัวเลข
CSS มีคุณสมบัติตัวนับการเพิ่มและการรีเซ็ตตัวนับ ซึ่งช่วยให้คุณสร้างตัวเลขที่เพิ่มขึ้นในองค์ประกอบ HTML เกือบทั้งหมดได้โดยอัตโนมัติ คล้ายกับรายการที่เรียงลำดับ
แต่ IE6, IE7 และแม้แต่ Safari (จนถึงเวอร์ชัน 3.x) ไม่รองรับคุณสมบัติเหล่านี้ แน่นอนว่า IE6 ยังไม่รองรับ :before pseudo-element
6.Min-ความสูง
บางครั้งการออกแบบหรือโครงสร้างการจัดวางของเว็บไซต์จำเป็นต้องมีพื้นที่เนื้อหาที่มีความสูงคงที่ ไม่เช่นนั้นเอฟเฟ็กต์ภาพบางอย่างจะหายไป นี่อาจเป็นเพราะพื้นหลังแบบไล่ระดับสี รายการดรอปดาวน์ที่ไม่ซ้ำใคร หรืออาจเป็นเพราะเอฟเฟกต์แสงเจิดจ้าที่ออกมาจาก Photoshop แต่บางครั้งเนื้อหาในเพจก็เยอะแต่ไม่สามารถขยายเพจได้ตามที่คาดไว้
ในขณะนี้ คุณต้องใช้แอตทริบิวต์ min-height เนื่องจากแอตทริบิวต์สามารถบอกเบราว์เซอร์ให้แสดงความสูงขั้นต่ำในองค์ประกอบระดับบล็อกเฉพาะได้ ไม่ว่าความสูงจริงของเนื้อหาจะถึงความสูงขั้นต่ำนี้หรือไม่ก็ตาม จากนั้น หากเนื้อหาเกินความสูงขั้นต่ำ องค์ประกอบจะขยายอย่างเหมาะสม
สิ่งเดียวที่ควรทราบเกี่ยวกับการใช้ min-height คือ IE6 ไม่รองรับ เราทุกคนรู้ดีว่า IE6 กำลังใกล้สูญพันธุ์ (อย่างช้าๆ) แต่ลูกค้าบางรายอาจยังต้องการให้เว็บไซต์ของตนรองรับเบราว์เซอร์เวรนั่น
ข่าวดีก็คือ IE6 เรนเดอร์ค่าความสูงในลักษณะเดียวกับที่เบราว์เซอร์อื่นเรนเดอร์ "min-height" ดังนั้นสิ่งที่คุณต้องมีก็แค่แฮ็กเฉพาะ IE6 หรือสไตล์ชีตแบบสแตนด์อโลนเพื่อเพิ่มความสูงเฉพาะ ปัญหาได้รับการแก้ไขแล้ว
IE6 ยังละเว้น min-width, max-height และ max-width แต่วิธีการข้างต้นก็เป็นไปได้สำหรับคุณสมบัติเหล่านี้เช่นกัน
7. :โฮเวอร์
ในทางเทคนิคแล้ว :hover เป็นเพียงคลาสหลอก แต่ไม่รองรับใน IE6 (รองรับ IE7 และ IE8) :hover pseudo-class ช่วยให้คุณสามารถเพิ่มสไตล์การเลื่อนเมาส์ให้กับองค์ประกอบได้ สิ่งนี้มีประโยชน์มากและหลีกเลี่ยงการใช้ JavaScript (อย่างน้อยก็ในระดับหนึ่ง)
แต่หากเว็บไซต์ของคุณจำเป็นต้องรองรับ IE6 อย่างสมบูรณ์ โดยเฉพาะอย่างยิ่งในประเทศจีนที่ IE6 ครองฟ้า คุณจะต้องพิจารณายกเลิกการใช้คลาสหลอกนี้ เว้นแต่แท็กที่เกี่ยวข้องจะมีแอตทริบิวต์ "href" เช่น แท็ก . และถ้าคุณต้องการบรรลุผลนี้ คุณอาจต้องหันไปใช้จาวาสคริปต์และสไตล์เพิ่มเติม
8.จอแสดงผล
โดยปกติแล้ว การแสดงผลจะถูกตั้งค่าเป็นค่าใดค่าหนึ่งจากสามค่าเหล่านี้: บล็อก อินไลน์ และไม่มีเลย "ขอบคุณ" สำหรับ IE ค่าอื่นๆ ของ Display ไม่ค่อยได้ใช้ ค่าเหล่านี้ ได้แก่ inline-block, table, inline-table และ table-cell เป็นต้น คุณลักษณะเหล่านี้มีประโยชน์มากสำหรับการแก้ปัญหาเค้าโครงพิเศษบางอย่าง
ดังนั้น แม้ว่า IE จะรองรับคุณสมบัติพื้นฐานทั้งสามนี้ของ Display แต่โดยพื้นฐานแล้วไม่รองรับคุณสมบัติอื่นๆ
ที่จริงแล้วการรองรับแอตทริบิวต์การแสดงผลของ IE8 นั้นค่อนข้างสมบูรณ์ อย่างไรก็ตาม สำหรับแอตทริบิวต์ inline-block นั้น IE6/7 รองรับเฉพาะองค์ประกอบที่อยู่ในบรรทัดเท่านั้น
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการรองรับการแสดงผลในเบราว์เซอร์ต่างๆ โปรดตรวจสอบที่นี่ - Shenfei Note
9. คลิป
นี่เป็นคุณสมบัติ CSS ที่น่าสนใจซึ่งมีประโยชน์ในสถานการณ์พิเศษ มันอาจจะรวมกับเนื้อหาที่คาดเดาไม่ได้และสร้างขึ้นแบบไดนามิก พูดง่ายๆ ก็คือแอตทริบิวต์นี้ช่วยให้คุณสามารถระบุพื้นที่ที่ซ่อนอยู่ในองค์ประกอบเฉพาะได้ - นอกจากนี้ยังสามารถเข้าใจได้ว่าในองค์ประกอบที่มีตำแหน่งที่แน่นอน พื้นที่แสดงผลขององค์ประกอบจะถูกครอบตัดตามการตั้งค่าบางอย่าง และเนื้อหา เกินกว่าบริเวณนี้จะถูกซ่อนไว้
ในทางเทคนิคแล้ว IE รองรับแอตทริบิวต์ clip แต่รองรับเฉพาะไวยากรณ์ที่ไม่มีเครื่องหมายจุลภาค เช่น
div ตัดทอน {
ช่องว่างภายใน: 20px;
ความกว้าง: 400px;
ความสูง: 400px;
คลิป: ตรง (20px 300px 200px 100px);
ตำแหน่ง: แน่นอน;
} สไตล์ด้านบน (แอตทริบิวต์ในวงเล็บหลังสี่เหลี่ยมจะไม่คั่นด้วยเครื่องหมายจุลภาค) สามารถทำงานได้ในเบราว์เซอร์ส่วนใหญ่ แต่อาจไม่ผ่านการตรวจสอบ CSS เนื่องจากคำสั่งไม่ได้คั่นด้วยเครื่องหมายจุลภาค
10. :โฟกัส
นี่เป็นคลาสหลอกอีกคลาสหนึ่งที่ต้องกล่าวถึงในที่นี้ เนื่องจากเบราว์เซอร์ที่ไม่ใช่ IE ทั้งหมดรองรับแอตทริบิวต์นี้ :focus หลอกคลาสช่วยให้คุณสามารถประกาศสไตล์พิเศษที่ถูกนำไปใช้กับองค์ประกอบของหน้าแบบไดนามิกเมื่อกลายเป็นโฟกัสของแป้นพิมพ์ (เมาส์) สิ่งนี้มีประโยชน์กับองค์ประกอบของแบบฟอร์มเนื่องจากคุณสามารถเพิ่มเส้นขอบให้กับฟิลด์อินพุตได้เมื่อถูกเลือก
