兼容所有主流浏览器的 CSS 间隔竖线

本文最近更新于 2018 年 05 月 15 日

有时候需要使用 | 间隔网站选项，当然有很多的选择，你会怎么实现呢？是不是使用下面的代码：

<a href="https://www.jsntn.com/">首页</a>|<a href="https://www.jsntn.com/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 来控制。