您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 移动前端 >> 浏览设计教程

网页设计细节,虚线框算不算?

上图先,免得被人说无图无真相(如今ps大行其道,有图一定有真相?)



你觉得图上的虚线框碍眼吗?这可是原生态的,偶没ps过。好吧,也许你会说这个框只是“瞬间”出现而已,有必要折腾吗?作为一个搞艺术的,我想说:一点点的遗憾是残缺美,整页的遗憾就是残疾了。

这里我们仅讨论ie6&&ie7下bt的虚线框。虚线框的高度跟字体、加粗与否无关。正常的虚框高度 = 字号+2(边框)。经测试,默认情况下,18px以下字号虚线框的高度大致为Math.floor((lineheight – fontsize – 2)/2) + fontsize + 2。以上图4为例,虚线框高度为 Math.floor((30 – 12 – 2)/2) + 12 + 2 = 22px,这时候虚线框已经很碍眼了。>=18px的公式不够严谨,就不写了。分别来看下上图的各种情况:

图5,图片、文字是一个连接内的,可是虚线框感情不和,分家了,看着很纠结啊。

图3,虚线框硬是把背景分成了2部分,难道右半部分还有个链接?

图2,虚线框大点也就算了,下面还没了,莫非这个是框公公。

图1,一呼百应,原来这个分页这么大。

上面这些被发现的,和还未被发现的在写css的时候应该是可以避免的。抛砖引玉,先说我的处理方法:

a {vertical-align:middle;}

我的方法只有一行,通过设置 vertical-align:middle 让连接获得焦点产生的虚线框不会随行高变化。图4中的问题就解决了。对于图5的问题可以设置图片的display:block;或者更少字符的float:left。比较完美的修改结果是这样的:



细节不仅仅是1px的事情,更多的问题,还有待我们发现。个人愚见,欢迎拍砖。


如果客官想去掉虚线框显示,请使用hideFocus参数;

移步到hideFocus(虚线框处理小技巧)

[教程作者:admin]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/wd1490.html
网页前端开发-19UED前端CSS代码规范
给网页设计师和前端开发者看的前端性能优化
图趣网微信
建议反馈
×