神奇的负margin解决border“合并”

如上图所示，这是一个分页样式，a:hover时，需要改变边框的颜色。

我们知道，除表格之外，其他标签的border是不能合并的。要解决这个问题，思路有三：

1、table布局（大概很少有人愿意在这里使用table）

2、display:table (这或许是解决之道，如果你不考虑ie6和ie7的话)

3、outline(使用outline属性代替border，你会发现相邻的2个outline叠加了，这正是解决之道？好吧，很遗憾的是ie6和ie7还是不支持)

这个例子其实来自我加的一个javascript群，有人问到了这个问题= =，当时我的就只想到了这三个方法，但是都不妥当。于是这个问题就搁下了。

3天后，我又想到了这个问题，再次尝试解决。

终于找到第四种方案：margin-left

.wrap{
    width: 300px;
    margin: 0 auto;
}
.box{
    float: left;
}
.box a{
    float: left;
    width: 40px;
    height: 40px;
    background-color: #edd;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    position: relative;/*必须*/
    z-index: 1;/*必须*/
    border:1px solid #000;
    margin-left: -1px;/*必须*/
}

.box a:hover{
    z-index: 2;/*必须*/
    border:1px solid #f00;
    
}

<div class='wrap'>
    <div class='box'>
        <a href="javascript:;">1</a>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">5</a>
    </div>
</div>

点击查看效果