|
最近的一個頁面中碰到的,本來想用 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)正常。
![請?zhí)砑用枋?src="http://myarticle.enet.com.cn/images/2009/1105/1257396076642.jpg"]()
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; } |
|
【收藏】【打印】【進(jìn)入論壇】 |
|
|
|
|
|
|
|