武林網(wǎng)(www.companysz.com)文章簡介：本來想用 border 來模擬設(shè)計圖的虛線效果，但是很明顯 border 效果不如設(shè)計圖來的好看。順便研究了下 dashed 和 dotted 的區(qū)別。

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

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

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

這里多說幾句廢話，其實參看下 demo，就能從視覺上獲得更直觀的感受了。
下面再說說相關(guān)的 bug 吧，當(dāng)然了，這些 bug 再一次只是光榮地出現(xiàn)在了 IE 下，此處涉及到 IE6 和 IE7。

Bug1: 在 IE6 下，1px 寬的 dotted 表現(xiàn)的和 dashed 一樣。當(dāng)寬度大于 1px 時，表現(xiàn)正常。

Bug2:在 IE7 下，當(dāng) 4 條邊的寬度是 1px 和 其它任意數(shù)值共存時，1px 的 dotted 表現(xiàn)的和 dashed 一樣。4 條邊的寬度全為 1px，或者為其它不是 1px 的不同值時不會出現(xiàn)這個 bug。

Bug3:另外，IE6 下，1px 的 dotted 或者 1px 的 dashed 邊框，在拖動頁面時，有時候邊框會連成實線，有時候會出現(xiàn)缺口。

要解決這些 bug，要么直接就不用 dotted 而直接用 dashed；要么用圖片代替；要么用額外標(biāo)簽和代碼來解決。

鑒于只有在邊框?qū)挾葹?1px 時才會出現(xiàn)這些 bug，可以設(shè)置外包圍標(biāo)簽的邊框?qū)挾葹?2px，通過增加一個內(nèi)標(biāo)簽，設(shè)置其為 1px 的內(nèi)容背景色邊框，再通過設(shè)置 margin-top/right/bottom/left: -1px; 來蓋掉外包圍標(biāo)簽的 1px 邊框，從視覺上實現(xiàn)正常效果。很啰嗦，很討厭，很無奈。

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