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

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

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

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

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

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

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

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

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

a {vertical-align:middle;}

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

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

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

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