Lo encontré en una página reciente. Originalmente quería usar bordes para simular el efecto de línea de puntos del dibujo de diseño, pero es obvio que el efecto de borde no es tan atractivo como el dibujo de diseño. Por cierto, estudié la diferencia entre guiones y puntos.
En primer lugar, para entenderlo literalmente, tanto las líneas discontinuas como las de puntos se refieren a "líneas de puntos".
discontinuo: desde guión, una línea discontinua compuesta de guión
punteado: de punto (punto), una línea de puntos compuesta de puntos, también llamada línea de puntos
Algunas palabras más sin sentido aquí. De hecho, puedes obtener una experiencia visual más intuitiva mirando la demostración .
Ahora hablemos de los errores relacionados. Por supuesto, estos errores una vez más solo aparecen gloriosamente en IE, aquí involucrando a IE6 e IE7.
Error 1: en IE6, un punto de 1 px de ancho se comporta igual que un punto. Cuando el ancho es mayor que 1px, se comporta normalmente.
Error 2: en IE7, cuando el ancho de los cuatro lados es de 1 px y coexiste cualquier otro valor, 1 px con puntos se comporta igual que con guiones. Este error no ocurrirá cuando el ancho de los cuatro lados sea de 1 px u otros valores diferentes que no sean 1 px.
Error 3: Además, en IE6, al arrastrar la página, a veces el borde punteado de 1 px o el borde discontinuo de 1 px se conectarán en una línea continua y, a veces, habrá espacios.
Para resolver estos errores, no utilice puntos y utilice guiones directamente; en su lugar, utilice imágenes o utilice etiquetas y códigos adicionales para resolverlos;
Dado que estos errores solo ocurren cuando el ancho del borde es de 1 px, puede establecer el ancho del borde de la etiqueta circundante exterior en 2 px, agregar una etiqueta interna, configurarla en un borde de color de fondo de contenido de 1 px y luego configurar el margen superior/derecho/ abajo/izquierda: -1px; para cubrir el borde de 1px que rodea la etiqueta exterior para lograr efectos visuales normales. Muy prolijo, molesto e indefenso.
.b6 {
borde: 2px punteado #000;
parte superior acolchada: 0;
}
.b6 .interior {
borde: 1px sólido #9c9c9c;
ancho: 100%;
altura: 100%;
margen: -1px;
posición: relativa;
índice z: 100;
}
Consulte la demostración para obtener más detalles.
Texto original: http://www.qianduan.net/ie-bug-1-pixel-dotted-and-dasshed-border.html