最近的一個頁面中碰到的，本來想用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
原文： http://www.qianduan.net/ie-bug-1-pixel-dotted-and-dashed-border.html