Eu o encontrei em uma página recente. Originalmente, queria usar bordas para simular o efeito de linha pontilhada do desenho, mas é óbvio que o efeito da borda não é tão bonito quanto o desenho. A propósito, estudei a diferença entre tracejado e pontilhado.
Em primeiro lugar, para entender literalmente, tracejado e pontilhado referem-se a "linhas pontilhadas".
tracejado: do traço, uma linha tracejada composta por traço
pontilhado: de ponto (ponto), uma linha pontilhada composta de pontos, também chamada de linha pontilhada
Mais algumas palavras sem sentido aqui. Na verdade, você pode obter uma experiência visual mais intuitiva olhando a demonstração .
Agora vamos falar sobre os bugs relacionados. Claro, esses bugs mais uma vez só aparecem gloriosamente no IE, aqui envolvendo o IE6 e o IE7.
Bug1: No IE6, o ponto de 1px de largura se comporta da mesma forma que o tracejado. Quando a largura é maior que 1px, ele se comporta normalmente.
Bug2: No IE7, quando a largura dos quatro lados é 1px e qualquer outro valor coexiste, 1px pontilhado se comporta da mesma forma que tracejado. Este bug não ocorrerá quando a largura dos quatro lados for 1px ou outros valores diferentes de 1px.
Bug3: Além disso, no IE6, ao arrastar a página, às vezes a borda pontilhada de 1px ou tracejada de 1px será conectada em uma linha sólida e às vezes haverá lacunas.
Para resolver esses bugs, não use pontilhado e use tracejado diretamente ou use imagens ou use tags e códigos adicionais para resolvê-los;
Como esses bugs ocorrem apenas quando a largura da borda é 1px, você pode definir a largura da borda da tag externa para 2px, adicionar uma tag interna, configurá-la para uma borda de cor de fundo de conteúdo de 1px e, em seguida, definir margin-top/right/ inferior/esquerda: -1px; para cobrir a borda de 1px ao redor do rótulo externo para obter efeitos visuais normais. Muito detalhado, irritante e indefeso.
.b6 {
borda: 2px pontilhada #000;
preenchimento superior: 0;
}
.b6 .inner {
borda: 1px sólido #9c9c9c;
largura: 100%;
altura: 100%;
margem: -1px;
posição: relativa;
índice z: 100;
}
Consulte a demonstração para obter detalhes
Texto original: http://www.qianduan.net/ie-bug-1-pixel-dotted-and-dashed-border.html