如上图所示，这是一个分页样式，a:hover时，需要改变边框的颜色。
我们知道，除表格之外，其他标签的border是不能合并的。要解决这个问题，思路有三：
1、table布局（大概很少有人愿意在这里使用table）
2、display:table (这或许是解决之道，如果你不考虑ie6和ie7的话)
3、outline(使用outline属性代替border，你会发现相邻的2个outline叠加了，这正是解决之道？好吧，很遗憾的是ie6和ie7还是不支持)
这个例子其实来自我加的一个javascript群，有人问到了这个问题= =，当时我的就只想到了这三个方法，但是都不妥当。于是这个问题就搁下了。
3天后，我又想到了这个问题，再次尝试解决。
终于找到第四种方案：margin-left
1 .wrap{ 2 width: 300px; 3 margin: 0 auto; 4 } 5 .box{ 6 float: left; 7 } 8 .box a{ 9 float: left; 10 width: 40px; 11 height: 40px; 12 background-color: #edd; 13 text-align: center; 14 line-height: 40px; 15 text-decoration: none; 16 position: relative;/*必须*/ 17 z-index: 1;/*必须*/ 18 border:1px solid #000; 19 margin-left: -1px;/*必须*/ 20 } 21 22 .box a:hover{ 23 z-index: 2;/*必须*/ 24 border:1px solid #f00; 25 26 }
1 <div class='wrap'> 2 <div class='box'> 3 <a href="javascript:;">1</a> 4 <a href="javascript:;">2</a> 5 <a href="javascript:;">3</a> 6 <a href="javascript:;">4</a> 7 <a href="javascript:;">5</a> 8 </div> 9 </div>