網(wǎng)頁(yè)設(shè)計(jì)細(xì)節(jié)，虛線框算不算？

上圖先，免得被人說(shuō)無(wú)圖無(wú)真相(如今ps大行其道，有圖一定有真相?)

你覺(jué)得圖上的虛線框礙眼嗎?這可是原生態(tài)的，偶沒(méi)ps過(guò)。好吧，也許你會(huì)說(shuō)這個(gè)框只是“瞬間”出現(xiàn)而已，有必要折騰嗎?作為一個(gè)搞藝術(shù)的，我想說(shuō)：一點(diǎn)點(diǎn)的遺憾是殘缺美，整頁(yè)的遺憾就是殘疾了。

這里我們僅討論ie6&&ie7下bt的虛線框。虛線框的高度跟字體、加粗與否無(wú)關(guān)。正常的虛框高度 = 字號(hào)+2(邊框)。經(jīng)測(cè)試，默認(rèn)情況下，18px以下字號(hào)虛線框的高度大致為Math.floor((lineheight – fontsize – 2)/2) + fontsize + 2。以上圖4為例，虛線框高度為 Math.floor((30 – 12 – 2)/2) + 12 + 2 = 22px，這時(shí)候虛線框已經(jīng)很礙眼了。>=18px的公式不夠嚴(yán)謹(jǐn)，就不寫(xiě)了。分別來(lái)看下上圖的各種情況：

圖5，圖片、文字是一個(gè)連接內(nèi)的，可是虛線框感情不和，分家了，看著很糾結(jié)啊。

圖3，虛線框硬是把背景分成了2部分，難道右半部分還有個(gè)鏈接?

圖2，虛線框大點(diǎn)也就算了，下面還沒(méi)了，莫非這個(gè)是框公公。

圖1，一呼百應(yīng)，原來(lái)這個(gè)分頁(yè)這么大。

上面這些被發(fā)現(xiàn)的，和還未被發(fā)現(xiàn)的在寫(xiě)css的時(shí)候應(yīng)該是可以避免的。拋磚引玉，先說(shuō)我的處理方法：

a {vertical-align:middle;}

我的方法只有一行，通過(guò)設(shè)置 vertical-align:middle 讓連接獲得焦點(diǎn)產(chǎn)生的虛線框不會(huì)隨行高變化。圖4中的問(wèn)題就解決了。對(duì)于圖5的問(wèn)題可以設(shè)置圖片的display:block;或者更少字符的float:left。比較完美的修改結(jié)果是這樣的：

細(xì)節(jié)不僅僅是1px的事情，更多的問(wèn)題，還有待我們發(fā)現(xiàn)。個(gè)人愚見(jiàn)，歡迎拍磚。

如果客官想去掉虛線框顯示，請(qǐng)使用hideFocus參數(shù)；

移步到hideFocus(虛線框處理小技巧)