| |
最近的一個(gè)頁面中碰到的，本來想用 border 來模擬設(shè)計(jì)圖的虛線效果，但是很明顯 border 效果不如設(shè)計(jì)圖來的好看。順便研究了下 dashed 和 dotted 的區(qū)別。
首先，從字面上來理解，dashed 和 dotted 都是指“虛線”，他們的不同在于：
dashed：來自 dash（破折號），由 dash 組成的虛線
dotted：來自 dot （點(diǎn)），由 dot 組成的虛線，也稱點(diǎn)線
這里多說幾句廢話，其實(shí)參看下 demo，就能從視覺上獲得更直觀的感受了。
下面再說說相關(guān)的 bug 吧，當(dāng)然了，這些 bug 再一次只是光榮地出現(xiàn)在了 IE 下，此處涉及到 IE6 和 IE7。
Bug1: 在 IE6 下，1px 寬的 dotted 表現(xiàn)的和 dashed 一樣。當(dāng)寬度大于 1px 時(shí)，表現(xiàn)正常。
![請?zhí)砑用枋?src="http://myarticle.enet.com.cn/images/2009/1105/1257396076642.jpg"]()
Bug2:在 IE7 下，當(dāng) 4 條邊的寬度是 1px 和 其它任意數(shù)值共存時(shí)，1px 的 dotted 表現(xiàn)的和 dashed 一樣。4 條邊的寬度全為 1px，或者為其它不是 1px 的不同值時(shí)不會出現(xiàn)這個(gè) bug。
Bug3:另外，IE6 下，1px 的 dotted 或者 1px 的 dashed 邊框，在拖動頁面時(shí)，有時(shí)候邊框會連成實(shí)線，有時(shí)候會出現(xiàn)缺口。
要解決這些 bug，要么直接就不用 dotted 而直接用 dashed；要么用圖片代替；要么用額外標(biāo)簽和代碼來解決。
鑒于只有在邊框?qū)挾葹?1px 時(shí)才會出現(xiàn)這些 bug，可以設(shè)置外包圍標(biāo)簽的邊框?qū)挾葹?2px，通過增加一個(gè)內(nèi)標(biāo)簽，設(shè)置其為 1px 的內(nèi)容背景色邊框，再通過設(shè)置 margin-top/right/bottom/left: -1px; 來蓋掉外包圍標(biāo)簽的 1px 邊框，從視覺上實(shí)現(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;
} |
|
|
| 【收藏】【打印】【進(jìn)入論壇】 |
|
|
|
|
| |
|
|
|
