吹毛求疵：解决IE6-7给链接加黑点边框的三种方案

先定义问题：大家都知道，CSS超链接的outline属性一直是为键盘用户增加易用性的好帮手（按Tab键focus下一条链接，是除Safari Win外的默认操作）。可以说，outline通常伴随着:focus事件出现。但如果你重新定义了:focus的样式，这个边框就显得很多余了。

对于标准的浏览器而言（IE8+，FF2.0+等），定义:focus时的outline:0足以解决问题。但不支持:focus的IE6和只支持超链接:focus的IE7的黑点边框又怎么解决呢？

今天花了点时间研究这个问题，最早发现的解决办法是通过Javascript解决。思路是：既然IE6和7的outline不是标准的outline（无法通过CSS定义），那肯定有某种JS可以解决。通过这篇Cody Lindley的老文章我们知道hideFocus可以禁用IE的特殊边框。

<a href="#test" onfocus="this.hideFocus=true;">link</a>

但这个方式要求每个链接都有onfocus属性，实在不太美观。Cody Lindley选择用getElementsByTagName对应添加，这是第一种思路。

在上述文章留言中有一个变种方案：既然只有IE不听话，我们用CSS Expression替换不就好了？把JS写入CSS文件，用Conditional Comment避开其他浏览器（只有IE支持CSS Expression，但我有洁癖，喜欢避免CSS警告）。

a { outline:expression(hideFocus='true'); }

众所周知，CSS Expression很耗费资源，若你的页面上链接很多那就更折磨CPU了。因此我们需要一个纯CSS的方式，cssplay的Stu Nicholls老头说纯CSS的方式可行，但没几个人看懂了他给的神奇例子。各位可以用IE去测试，每块拼图都是超链接，Tab键和右键点击却不会有黑色边框。

我花了点时间研究它的CSS，发现原来通过在超链接里附加其他inline标签，通过CSS定位可以做到隐藏IE边框的效果。

首先是HTML

<a href="#test"><span>关于萌番</span></a>

然后是CSS


a { position:relative; margin:0 48px 0 0; }
a span { position:absolute; top:-1px; left:0; cursor:pointer; white-space:nowrap; }
a:hover { background:transparent; }
a:hover span { background:#1C72B7; height:17px; overflow:hidden; }
a:active { background:transparent; }
a:active span { background:#FFF799; height:17px; overflow:hidden; color:#F4B036; }
a:focus { background:transparent; }
a:focus span { background:#FFF799; height:17px; overflow:hidden; color:#F4B036; }


基本原理是让超链接完全坍塌，IE的focus边框就不会显示了。把文字藏在span标签中，再绝对定位于链接区域里（不理解position的请看这篇文章），这样坍塌时文字就不会被隐藏了。加入white-space:nowrap避免文字换行，cursor:pointer模仿鼠标指针，最后定义span为我们希望链接显示的样式，完成对黑点边框的回避。

当然纯CSS方式也有问题：由于链接标签坍塌，我们没办法让标签宽度自适应文字长度。为避免文字相互重叠，这里使用margin增加链接的宽度，换成display:inline-block与width的组合亦可……对于特定宽度的需求，我暂时想不到任何绕过办法。

客栈的吹毛求疵到此为止，我可以满足的休息了。有CSS恶趣味的旅客不妨进一步意淫。