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

看似很简单的导航，仅仅就是几条边框，但是真正写起来却遇到了麻烦，导航的中间项边框会是双倍像素。在别人的帮助下，写出了两种解决方法，其实都是一样的，利用了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>