Je l'ai rencontré sur une page récente. Au départ, je voulais utiliser des bordures pour simuler l'effet de ligne pointillée du dessin de conception, mais il est évident que l'effet de bordure n'est pas aussi beau que le dessin de conception. Au fait, j'ai étudié la différence entre les pointillés et les pointillés.
Tout d'abord, pour le comprendre littéralement, les pointillés et les pointillés font tous deux référence à des « lignes pointillées ». La différence entre eux est la suivante :
dashed : à partir de dash, une ligne pointillée composée de tiret
pointillé : à partir de point (point), une ligne pointillée composée de points, aussi appelée ligne pointillée
Encore quelques mots absurdes ici. En fait, vous pouvez obtenir une expérience visuelle plus intuitive en regardant la démo .
Parlons maintenant des bugs associés. Bien entendu, ces bugs n’apparaissent encore une fois glorieusement que sous IE, impliquant ici IE6 et IE7.
Bug1 : sous IE6, les pointillés de 1 px de large se comportent de la même manière que les pointillés. Lorsque la largeur est supérieure à 1 px, elle se comporte normalement.
Bug2 : Sous IE7, lorsque la largeur des quatre côtés est de 1 px et que toute autre valeur coexiste, 1 px en pointillé se comporte de la même manière qu'en pointillé. Ce bug ne se produira pas lorsque la largeur des quatre côtés est entièrement de 1 px, ou d'autres valeurs différentes autres que 1 px.
Bug3 : De plus, sous IE6, lors du déplacement de la page, parfois la bordure en pointillés de 1 px ou en pointillés de 1 px sera reliée en une ligne continue, et parfois il y aura des espaces.
Pour résoudre ces bugs, soit n'utilisez pas de pointillés mais utilisez directement des tirets ; soit utilisez des images à la place, soit utilisez des balises et des codes supplémentaires pour les résoudre ;
Étant donné que ces bogues ne se produisent que lorsque la largeur de la bordure est de 1 px, vous pouvez définir la largeur de la bordure de la balise extérieure environnante sur 2 px, ajouter une balise intérieure, la définir sur une bordure de couleur d'arrière-plan du contenu de 1 px, puis définir margin-top/right/ bas/gauche : -1px ; pour masquer la bordure de 1 px entourant l'étiquette extérieure afin d'obtenir des effets visuels normaux. Très verbeux, ennuyeux et impuissant.
.b6 {
bordure : 2px en pointillés #000 ;
rembourrage supérieur : 0 ;
}
.b6 .intérieur {
bordure : 1px solide #9c9c9c ;
largeur : 100 % ;
hauteur : 100 % ;
marge : -1px ;
position : relative ;
indice z : 100 ;
}
Veuillez vous référer à la démo pour plus de détails
Texte original : http://www.qianduan.net/ie-bug-1-pixel-dotted-and-dashed-border.html