07 Jul 2010兼容所有主流浏览器的CSS间隔竖线
| 有时候需要使用 | 间隔网站选项，当然有很多的选择，你会怎么实现呢？是不是使用下面的代码： |
<a href="/">首页</a>|<a href="/about">关于</a> |
我们来看看taobao和paipai的实现方式，这两个站首页罗例产品分类时，都使用了这种样式：
paipai的实现：
a{
border-left: 1px solid #D9D9D9;
margin-left: -1px;
padding-left: 5px;
} |
taobao的实现：
a{
border-left: 1px solid #B7D0E4;
display: inline-block;
margin-left: -1px;
padding: 0px 0px 0px 3px;
} |
这段CSS很巧妙的将margin-left设为-1，将第一个border隐藏了起来，而且兼容所有的主流浏览器。这样，就不用给第一个或者最后一个样式做特殊样式处理了。如果间隔需要大些，可以很方便的通过设置padding-left和padding-right来控制。
Til next time,
Jason at 00:00
