|
最近的一個(gè)頁(yè)面中碰到的，本來(lái)想用 border 來(lái)模擬設(shè)計(jì)圖的虛線效果，但是很明顯 border 效果不如設(shè)計(jì)圖來(lái)的好看。順便研究了下 dashed 和 dotted 的區(qū)別。
首先，從字面上來(lái)理解，dashed 和 dotted 都是指“虛線”，他們的不同在于：
dashed：來(lái)自 dash（破折號(hào)），由 dash 組成的虛線
dotted：來(lái)自 dot （點(diǎn)），由 dot 組成的虛線，也稱點(diǎn)線
這里多說(shuō)幾句廢話，其實(shí)參看下 demo，就能從視覺(jué)上獲得更直觀的感受了。
下面再說(shuō)說(shuō)相關(guān)的 bug 吧，當(dāng)然了，這些 bug 再一次只是光榮地出現(xiàn)在了 IE 下，此處涉及到 IE6 和 IE7。
Bug1: 在 IE6 下，1px 寬的 dotted 表現(xiàn)的和 dashed 一樣。當(dāng)寬度大于 1px 時(shí)，表現(xiàn)正常。
Bug2:在 IE7 下，當(dāng) 4 條邊的寬度是 1px 和 其它任意數(shù)值共存時(shí)，1px 的 dotted 表現(xiàn)的和 dashed 一樣。4 條邊的寬度全為 1px，或者為其它不是 1px 的不同值時(shí)不會(huì)出現(xiàn)這個(gè) bug。
Bug3:另外，IE6 下，1px 的 dotted 或者 1px 的 dashed 邊框，在拖動(dòng)頁(yè)面時(shí)，有時(shí)候邊框會(huì)連成實(shí)線，有時(shí)候會(huì)出現(xiàn)缺口。
要解決這些 bug，要么直接就不用 dotted 而直接用 dashed；要么用圖片代替；要么用額外標(biāo)簽和代碼來(lái)解決。
鑒于只有在邊框?qū)挾葹?1px 時(shí)才會(huì)出現(xiàn)這些 bug，可以設(shè)置外包圍標(biāo)簽的邊框?qū)挾葹?2px，通過(guò)增加一個(gè)內(nèi)標(biāo)簽，設(shè)置其為 1px 的內(nèi)容背景色邊框，再通過(guò)設(shè)置 margin-top/right/bottom/left: -1px; 來(lái)蓋掉外包圍標(biāo)簽的 1px 邊框，從視覺(jué)上實(shí)現(xiàn)正常效果。很啰嗦，很討厭，很無(wú)奈。
.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;
}
詳情請(qǐng)參考 demo
原文：http://www.qianduan.net/ie-bug-1-pixel-dotted-and-dashed-border.html
本文鏈接：http://m.95time.cn/tech/web/2009/7171.asp 
出處：前端觀察
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
