IE bug: 1像素的dotted/dashed边框
最近的一个页面中碰到的，本来想用 border 来模拟设计图的虚线效果，但是很明显 border 效果不如设计图来的好看。顺便研究了下 dashed 和 dotted 的区别。
首先，从字面上来理解，dashed 和 dotted 都是指“虚线”，他们的不同在于：
dashed：来自 dash（破折号），由 dash 组成的虚线
dotted：来自 dot （点），由 dot 组成的虚线，也称点线
这里多说几句废话，其实参看下 demo，就能从视觉上获得更直观的感受了。
下面再说说相关的 bug 吧，当然了，这些 bug 再一次只是光荣地出现在了 IE 下，此处涉及到 IE6 和 IE7。本文来自前端观察，转载请以链接形式注明版权。
Bug1: 在 IE6 下，1px 宽的 dotted 表现的和 dashed 一样。当宽度大于 1px 时，表现正常。
Bug2:在 IE7 下，当 4 条边的宽度是 1px 和 其它任意数值共存时，1px 的 dotted 表现的和 dashed 一样。4 条边的宽度全为 1px，或者为其它不是 1px 的不同值时不会出现这个 bug。
Bug3:另外，IE6 下，1px 的 dotted 或者 1px 的 dashed 边框，在拖动页面时，有时候边框会连成实线，有时候会出现缺口。
要解决这些 bug，要么直接就不用 dotted 而直接用 dashed；要么用图片代替；要么用额外标签和代码来解决。本文来自前端观察，转载请以链接形式注明版权。
鉴于只有在边框宽度为 1px 时才会出现这些 bug，可以设置外包围标签的边框宽度为 2px，通过增加一个内标签，设置其为 1px 的内容背景色边框，再通过设置 margin-top/right/bottom/left: -1px; 来盖掉外包围标签的 1px 边框，从视觉上实现正常效果。很啰嗦，很讨厌，很无奈。
.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;
}
详情请参考 demo 本文来自前端观察，转载请以链接形式注明版权。
记得当初做pj的skin时就发现dotted 和 dashed的差异，当时没细究原因，直接弃用dotted全部改用 dashed了
貌似我有一个系列的skin是全css而且全虚线框的，就是用的 dashed
1px 的 dashed 也会有问题的，还是时有时无的问题。
很少选择dotted。用图片弄整个虚线框，还真没弄过。
其实这个问题是很细小的问题，很少会用到，我也只是偶尔想起来，去细究的时候才发现的。
很少选择dashed
bug2，我怎么都想不到为什么会出现这样的问题。囧。。
IE 有时甚至会莫名其妙的将1px 显示得很粗，然后，鼠标移上去后又变正常了。很诡异。于是，IE上全部被我换成 solid
兼容性的问题总是让人很郁闷
感觉最后的方法不错。
“当 4 条边的宽度是 1px 和 其它任意数值共存是”发现了个错别字。。。
已修改，多谢指正。
看来这里高手很多啊
一直用solid
呵呵，的确遇到
想法很不错。虽然罗嗦了点。也只好这样的了。
對於BUG3, 有個很令人無語但是至少在效果上完美代碼也較少的方法.
就是在body上應用背景圖片, 即使實際上引用的背景圖片不存在也可以.
我发现加上zoom：1.0001也可以解决在IE6、7上的bug3，对IE8不起作用。body加背景图片的方法我试着并不奏效。
抱歉我昨天沒有說清楚, 如果用在body上加背景圖片的方法來解決BUG3, 則必須滿足2個條件: 第一要引用一張圖片, 存在與不存在均可, 第二要定義background-attachment的值為fixed. 以上在IE6.0.2900.2180, IE6.0.2800.1106, IE7上均測試通過.
从你这儿终于找到问题所在了！！ 分别设置border-width为不同像素宽度，在某些不为人知的情况下，会变得很粗。。。。 奇怪的是我另外一个站同样的设置，就没有问题。。。。
恩，用了solid 还加上了thin。