1像素的dotted/dashed邊框

最近的一個頁面中碰到的，本來想用border來模擬設計圖的虛線效果，但是很明顯border效果不如設計圖來的好看。順便研究了下dashed和dotted的區別。

首先，從字面上來理解，dashed和dotted都是指“虛線”，他們的不同在於：

dashed：來自dash（破折號），由dash組成的虛線
dotted：來自dot （點），由dot組成的虛線，也稱點線

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;
}

文章提供baystars design網頁設計公司