神奇的负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:;/*必须*/
     border:1px solid #000;
     margin-left: -1px;/*必须*/
 }

 .box a:hover{
     z-index:;/*必须*/
     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>

点击查看效果