投稿

设计细节，虚线框算不算

Vedu • • 界面设计 • 阅读 1127

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

祝大家新年快乐。
上图先，免得被人说无图无真相(如今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的事情，更多的问题，还有待我们发现。个人愚见，欢迎拍砖。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/192.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2010-01-01 06:45
下一篇 2010-01-04 11:19

相关推荐

发表评论

登录后才能评论