ฉันพบมันในหน้าล่าสุด เดิมทีฉันต้องการใช้เส้นขอบเพื่อจำลองเอฟเฟกต์เส้นประของแบบร่างการออกแบบ แต่เห็นได้ชัดว่าเอฟเฟกต์เส้นขอบนั้นไม่ดูดีเท่ากับแบบร่างการออกแบบ อย่างไรก็ตาม ฉันศึกษาความแตกต่างระหว่างเส้นประและเส้นประ
ก่อนอื่น เพื่อให้เข้าใจตามตัวอักษร ทั้ง เส้นประ และ เส้นประ หมายถึง "เส้นประ" ความแตกต่างระหว่างเส้นประและเส้นประ
ประ: จากเส้นประ, เส้นประที่ประกอบด้วยเส้นประ
ประ: จากจุด (จุด) เส้นประที่ประกอบด้วยจุดหรือที่เรียกว่าเส้นประ
คำไร้สาระอีกสองสามคำที่นี่ อันที่จริง คุณจะได้รับประสบการณ์การมองเห็นที่เป็นธรรมชาติมากขึ้นโดยดูที่ การสาธิต
ตอนนี้เรามาพูดถึงข้อบกพร่องที่เกี่ยวข้องกัน แน่นอนว่าข้อบกพร่องเหล่านี้จะปรากฏขึ้นอีกครั้งภายใต้ IE ซึ่งเกี่ยวข้องกับ IE6 และ IE7
Bug1: ภายใต้ IE6, จุดกว้าง 1px จะทำงานเหมือนกับเส้นประ เมื่อความกว้างมากกว่า 1px มันจะทำงานตามปกติ
Bug2: ใน IE7 เมื่อความกว้างของทั้งสี่ด้านคือ 1px และมีค่าอื่นๆ อยู่ร่วมกัน 1px แบบเส้นประจะทำงานเหมือนกับเส้นประ จุดบกพร่องนี้จะไม่เกิดขึ้นเมื่อความกว้างของทั้งสี่ด้านเป็น 1px ทั้งหมด หรือค่าอื่นอื่นที่ไม่ใช่ 1px
Bug3: นอกจากนี้ ใน IE6 เมื่อลากหน้า บางครั้งเส้นขอบประขนาด 1px หรือเส้นประขนาด 1px จะเชื่อมต่อกันเป็นเส้นทึบ และบางครั้งอาจมีช่องว่าง
เพื่อแก้ไขข้อบกพร่องเหล่านี้ อย่าใช้จุดและใช้เส้นประโดยตรง หรือใช้รูปภาพแทน หรือใช้แท็กและโค้ดเพิ่มเติมเพื่อแก้ไข
เนื่องจากข้อบกพร่องเหล่านี้เกิดขึ้นเมื่อความกว้างของเส้นขอบคือ 1px เท่านั้น คุณสามารถตั้งค่าความกว้างของเส้นขอบของแท็กรอบนอกเป็น 2px เพิ่มแท็กด้านใน ตั้งค่าเป็นเส้นขอบสีพื้นหลังของเนื้อหา 1px จากนั้นตั้งค่า margin-top/right/ ล่าง/ซ้าย: -1px; เพื่อปกปิดเส้นขอบ 1px รอบๆ ป้ายกำกับด้านนอกเพื่อให้ได้เอฟเฟกต์ภาพปกติ ละเอียดมาก น่ารำคาญ และทำอะไรไม่ถูก
.b6 {
เส้นขอบ: 2px จุด #000;
ช่องว่างด้านบน: 0;
-
.b6 .ภายใน {
เส้นขอบ: 1px ทึบ #9c9c9c;
ความกว้าง: 100%;
ความสูง: 100%;
ระยะขอบ: -1px;
ตำแหน่ง: ญาติ;
ดัชนี z: 100;
-
โปรดดู การ สาธิตสำหรับรายละเอียด
ข้อความต้นฉบับ: http://www.qianduan.net/ie-bug-1-pixel-dotted-and-dashed-border.html