边框导航右边框双倍像素问题

看似很简单的导航，仅仅就是几条边框，但是真正写起来却遇到了麻烦，导航的中间项边框会是双倍像素。在别人的帮助下，写出了两种解决方法，其实都是一样的，利用了margin-left负值。以下为两种方法代码。

第一种方法：利用padding-left将父级向右偏移几px，在子级下用margin-left负值向左偏移相同的几px。a元素hover的时候要提升层级。

css部分：
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 402px;
            margin: 0 auto;
            overflow: hidden;
        }
        .subBox{
             padding-left: 2px; 
        }
        .list{
            float: left;
            width: 98px;
            border: 2px solid #333;
             margin-left: -2px;
        }
        .list:hover{
          position: relative;
            z-index: 1;
            border-color: #ff0000;
        }
 
html部分：
<div class="box">
    <div class="subBox">
        <div class="list">导航第一项</div>
        <div class="list">导航第二项</div>
        <div class="list">导航第三项</div>
        <div class="list">导航第四项</div>
    </div>
</div>

第二种方法：直接将父级的每项利用margin-left负值向左偏移，同样a元素hover时要提升层级。

代码如下：

css部分:

ul,body{margin:0;padding:0;}
.list{width: 960px;
margin: 80px auto 0px;
}
li{list-style:none; float:left; margin-left:-2px;}
a{text-decoration:none;}

.list a{display:block;float:left;padding:0 16px;height:40px;line-height:40px;font-size:14px;color:#00f;position: relative;border:2px solid #f09;}
.list a:hover{border-color:#000;position: relative; z-index:1;} 

html部分：

<ul class="list">
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">如何购买</a></li>
<li><a href="#">下载中心</a></li>
<li><a href="#">联系我们</a></li>
</ul>