I encountered it on a recent page. I originally wanted to use borders to simulate the dotted line effect of the design drawing, but it is obvious that the border effect is not as good-looking as the design drawing. By the way, I studied the difference between dashed and dotted.
First of all, to understand it literally, dashed and dotted both refer to "dotted lines". The difference between them is:
dashed: from dash, a dashed line composed of dash
dotted: from dot (dot), a dotted line composed of dots, also called a dotted line
A few more words of nonsense here. In fact, you can get a more intuitive visual experience by looking at the demo .
Now let’s talk about the related bugs. Of course, these bugs once again only appear gloriously under IE, here involving IE6 and IE7.
Bug1: Under IE6, 1px wide dotted behaves the same as dashed. When the width is greater than 1px, it behaves normally.
Bug2: Under IE7, when the width of the four sides is 1px and any other value coexists, 1px dotted behaves the same as dashed. This bug will not occur when the width of the four sides is all 1px, or other different values other than 1px.
Bug3: In addition, under IE6, when dragging the page, sometimes the 1px dotted or 1px dashed border will be connected into a solid line, and sometimes there will be gaps.
To solve these bugs, either do not use dotted and use dashed directly; or use pictures instead; or use additional tags and codes to solve them.
Since these bugs only occur when the border width is 1px, you can set the border width of the outer surrounding tag to 2px, add an inner tag, set it to a 1px content background color border, and then set margin-top/right/ bottom/left: -1px; to cover up the 1px border surrounding the outer label to achieve normal visual effects. Very verbose, annoying, and helpless.
.b6 {
border: 2px dotted #000;
padding-top: 0;
}
.b6 .inner {
border: 1px solid #9c9c9c;
width: 100%;
height: 100%;
margin: -1px;
position: relative;
z-index: 100;
}
Please refer to the demo for details
Original text: http://www.qianduan.net/ie-bug-1-pixel-dotted-and-dashed-border.html