你觉得图上的虚线框碍眼吗？这可是原生态的，偶没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
微信扫一扫
支付宝扫一扫
相关推荐
-
关于制作网站时CSS 中对背景图的定位问题
如今的网站都是用css来控制外观的，里面一些按照之类的图片都是直接在这里设置，通过设置position的位置来定位要的图片，但如何才能精确定位到想要的图标上呢？答案很简单，用ps打开那些背景图，再打开ps的“信息”面板，你只要移动鼠标到你想要定位的地方，就可以在“信息”面板上看到坐标了。
-
平面设计行业就业前景分析
平面设计与商业活动紧密结合，在国内的就业范围非常广泛，与各行业密切相关，同时也是其它各设计门类（诸如：网页设计、展览展示设计、三维设计、影视动画等）的基石。 平面设计师的薪金待遇处位于国内高收入职位的前十名之列。目前，一名优秀的平面设计师的平均月薪在3000－4000元左右，若有能力胜任更高的职位，如设计部门主管、创意部门总监等，其平均月薪一般不会低于6000－8000元人民币。如果你厌倦了为别人打工的生活，那么，一旦具备了作为一位优秀平面设计师应有的素质和技能，只需配备基本的电脑设备就可以成立自己的设计工作室，这对于向往自由生活空间的人来说，不但是一条个人创业的捷径，而且是一种令人向往的生活方式。
-
Web前端 之登录系统插件
前端开发中，多多少少会遇到登录口，此文为大家整理出一些单点登录的插件，希望对大家有所帮助，以备不时之需，也谢谢大家对我们的支持！！ 1.基于 Cookie 的 SSO 中间件ki…
-
电商系统商品管理：后台类目、前台类目、店铺分类详解
编辑导语：在电商系统中，清晰的商品类目设计不仅有助于消费者寻找商品，同时也有助于商家和平台操作。本篇文章里，作者就前台类目、后台类目与店铺分类进行阐述。如果你对这些类目有所混淆、并…
-
Logo设计最巧妙的方法：同构、矛盾、重叠、变幻
同构 同构标志图形是利用事物与事物之间某些相似元素，并按一定的内在逻辑关系来进行图形的构成，相似元素的范围极为宽广，同构组织关系，无论是哪一种形式结合，重要的是既要注重整体的概念，…
-
一大波优秀的交互设计实例欣赏
现在很多优秀的网站、移动应用中都广泛的使用到交互设计。网络上也有很多相关的文章，例如什么是交互设计，交互设计的流程是怎样的？但是设计从来不是空谈，理论和实际的碰撞，才能激发出更多的…
-
css超级实用的一些写法
一提起图标，大家可能第一个会想到PS、美工等词语，但很多小图标现在根本都不需要再打开PS了。 1、常见的括号（ 前进或后退“>” ） .arrow{ width:12rpx;…
-
所有的动效设计几乎都是这14个软件做出来的
随着UI设计的不断发展，UI动效越来越多的被应用于实际的生活中。手机、iPad、电脑、网页等各设备都在大范围应用，那么问题就来了，为什么UI动效越来越被广泛应用？它有哪些优势呢？有…
-
看看这些酷炫的UI界面设计，是不是马上有跃跃欲试的冲动
作为一名UI设计师对好看的作品那种劲我想大家都懂的，反正巴巴哥就是属于这样，见好必须就“收”，呵呵，当然这里我所说的“收”是吸收的意思，优秀的作品一定要去领悟作者背后的设计动机，这…
-
不用JS和CSS独立完成许多牛掰的页面布局功能
前言 在日常项目开发中，在布局方面有遇到哪些问题了？今天来一起看看CSS布局有哪些小技巧，后续开发更轻松。本文主要通过简单的示例，讲述开发中遇到的布局等问题，但不仅限于布局相关，会…