Saya menemukannya di halaman baru-baru ini. Awalnya saya ingin menggunakan batas untuk mensimulasikan efek garis putus-putus pada gambar desain, tetapi jelas bahwa efek batas tidak seindah gambar desain. Ngomong-ngomong, saya mempelajari perbedaan antara garis putus-putus dan titik.
Pertama-tama, untuk memahaminya secara harfiah, garis putus-putus dan titik-titik keduanya mengacu pada "garis putus-putus".
putus-putus: dari tanda hubung, garis putus-putus terdiri dari tanda hubung
putus-putus: dari titik (titik), garis putus-putus yang terdiri dari titik-titik, disebut juga garis putus-putus
Beberapa kata yang tidak masuk akal lagi di sini. Faktanya, Anda bisa mendapatkan pengalaman visual yang lebih intuitif dengan melihat demonya .
Sekarang mari kita bicara tentang bug terkait. Tentu saja, bug ini sekali lagi hanya muncul dengan baik di IE, di sini melibatkan IE6 dan IE7.
Bug1: Di bawah IE6, titik-titik selebar 1 piksel berperilaku sama seperti titik-titik. Ketika lebarnya lebih besar dari 1 piksel, ia berperilaku normal.
Bug2: Di IE7, ketika lebar keempat sisinya adalah 1 piksel dan nilai lainnya hidup berdampingan, titik 1 piksel berperilaku sama seperti garis putus-putus. Bug ini tidak akan terjadi jika lebar keempat sisinya semuanya 1px, atau nilai lain selain 1px.
Bug3: Selain itu, di IE6, saat menyeret halaman, terkadang batas titik 1px atau garis putus-putus 1px akan dihubungkan menjadi garis padat, dan terkadang akan ada celah.
Untuk mengatasi bug ini, jangan gunakan titik-titik dan gunakan garis putus-putus secara langsung; atau gunakan gambar saja atau gunakan tag dan kode tambahan untuk mengatasinya.
Karena bug ini hanya terjadi jika lebar tepi adalah 1 piksel, Anda dapat menyetel lebar tepi tag di sekeliling bagian luar menjadi 2 piksel, menambahkan tag bagian dalam, menyetelnya ke tepi warna latar belakang konten sebesar 1 piksel, lalu menyetel margin-top/right/ bawah/kiri: -1px; untuk menutupi batas 1px yang mengelilingi label luar untuk mendapatkan efek visual normal. Sangat bertele-tele, menjengkelkan, dan tidak berdaya.
.b6 {
batas: 2px bertitik #000;
bantalan atas: 0;
}
.b6 .batin {
batas: 1 piksel padat #9c9c9c;
lebar: 100%;
tinggi: 100%;
margin: -1 piksel;
posisi: relatif;
indeks-z: 100;
}
Silakan lihat demo untuk detailnya
Teks asli: http://www.qianduan.net/ie-bug-1-pixel-dotted-and-dashed-border.html