相比CSS3的新特性，CSS 2.1标准下的pseudo（伪类选择器）已经通用于所有主要浏览器的稳定版本（FF 3.5，Safari 4，Chrome 4，Opera 10以及IE8），这样一来我们就可以三次装饰同一个容器而不用建div巢了。Nicolas Gallagher最近写了一篇文章，看完两个DEMO（1,2）之后我清楚认识到自己没掌握CSS 2.1的事实。

ppk曾经说IE的传统盒子模型比W3C的定义好理解，但为什么IE的盒子还是比W3C的糟糕呢？因为IE盒子的定义连IE盒子的支持者自己都搞不清楚。与文中所述相反，IE盒子并不包括margin，而只是纯粹的计算padding与border的占位。为什么IE传统盒子这么烦？因为需要反向推导一个盒子的内容宽度，而浏览器渲染时期望尽快知道内容的宽度。再有，IE传统盒子硬是把微软自己的开发团队都搞晕了，有些bug还穿越出现在标准模式下，哦，你不知道IE6的标准模式使用W3C的盒子定义？

支持IE传统盒子的同学，没有为IE5.x开发过的同学，请你考虑这个问题：如今CSS3支持图片border了，使用IE盒子模式，浏览器应该怎么计算内容宽度？CSS3是为设计者方便提供帮助，请不要以box-sizing为借口，为IE5.x的顽固不化辩护。

延伸阅读：

• Internet Explorer and the CSS box model

• The Box Model Problem

• Box model tweaking

• Internet Explorer box model bug

你真的懂CSS？那就来理解一下他的最新杰作：“在不知道图片大小尺寸的情况下，仅使用CSS与(X)HTML完成图片的跨浏览器等比缩放”吧！听起来简单，看起来简单，却不是三脚猫网页开发者能解决的。假如你嫌页面源代码太乱，自己下载这个精简版玩玩吧～

A Way Back上有一篇重新审视网站字体排序的文章。虽然中文世界的字体堆栈一般只有宋体和雅黑两种（而且是浏览器默认，不是CSS定义……），但随着不同操作系统的出炉，默认字体的比率也发生了变化，这篇文章尝试探索CSS字体家族定义的优化（仅用系统内的默认字体，而不是embed）。顺便一提，此站也是经典的blogazine + typography爱好者。

先定义问题：大家都知道，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恶趣味的旅客不妨进一步意淫。