網(wǎng)頁設計細節(jié),虛線框算不算?
上圖先,免得被人說無圖無真相(如今ps大行其道,有圖一定有真相?)
你覺得圖上的虛線框礙眼嗎?這可是原生態(tài)的,偶沒ps過。好吧,也許你會說這個框只是“瞬間”出現(xiàn)而已,有必要折騰嗎?作為一個搞藝術的,我想說:一點點的遺憾是殘缺美,整頁的遺憾就是殘疾了。
這里我們僅討論ie6&&ie7下bt的虛線框。虛線框的高度跟字體、加粗與否無關。正常的虛框高度 = 字號+2(邊框)。經(jīng)測試,默認情況下,18px以下字號虛線框的高度大致為Math.floor((lineheight – fontsize – 2)/2) + fontsize + 2。以上圖4為例,虛線框高度為 Math.floor((30 – 12 – 2)/2) + 12 + 2 = 22px,這時候虛線框已經(jīng)很礙眼了。>=18px的公式不夠嚴謹,就不寫了。分別來看下上圖的各種情況:
圖5,圖片、文字是一個連接內的,可是虛線框感情不和,分家了,看著很糾結啊。
圖3,虛線框硬是把背景分成了2部分,難道右半部分還有個鏈接?
圖2,虛線框大點也就算了,下面還沒了,莫非這個是框公公。
圖1,一呼百應,原來這個分頁這么大。
上面這些被發(fā)現(xiàn)的,和還未被發(fā)現(xiàn)的在寫css的時候應該是可以避免的。拋磚引玉,先說我的處理方法:
a {vertical-align:middle;}
我的方法只有一行,通過設置 vertical-align:middle 讓連接獲得焦點產(chǎn)生的虛線框不會隨行高變化。圖4中的問題就解決了。對于圖5的問題可以設置圖片的display:block;或者更少字符的float:left。比較完美的修改結果是這樣的:
細節(jié)不僅僅是1px的事情,更多的問題,還有待我們發(fā)現(xiàn)。個人愚見,歡迎拍磚。
如果客官想去掉虛線框顯示,請使用hideFocus參數(shù);
本文地址:http://likemindfilms.com/tutorial/wd1490.html