html - 边框中多余的错位像素

Question

我制作了一个测试标题来制作我的动画。

粗红线的作用是在用户点击它时滑动到下一个标题。它适用于“主页”、“关于”和“联系方式”...

但由于某种原因，Gallery 有一个额外的错位像素。 (您可能需要放大)

这是 HTML:

 <div id="header2">
    <div id="sliderArea2">
      <div id="slider2"></div>
    </div>
    <div id="mainHeaders2">
      <div> Home </div>
      <div> About </div>
      <div> Gallery </div>
      <div> Contact </div>
    </div>
</div>

点击 Action :

$("#mainHeaders2 div").click(function(){
    var index = $("#mainHeaders2 div").index(this);
    $("#slider2").animate({marginLeft:index*25+"%"});
});

还有 CSS:

#slider1,#slider2{
    height:4px;
    width:23%;
    background-color:red;
}

#sliderArea1, #sliderArea2 {
    height:4px;
    width:75%;
    margin:auto;
    /*border:1px solid; /* debugging purposes */
}

#mainHeaders1, #mainHeaders2 {
    width:75%;
    margin:auto;
}

#mainHeaders1 div{
    width:22%;
    float:left;
    margin:0px;
    margin-top:2px;
    margin-right:2%;
    padding-left:1%;
    padding-top:10px;
    border-top:1px solid red;
    /*border:1px solid; /*debugging */
    overflow:hidden;

}

#mainHeaders2 div{
    width:22%;
    float:left;
    margin:0px;
    margin-right:2%;
    padding-left:1%;
    padding-top:10px;
    border-top:1px solid red;
    /*border:1px solid; /*debugging */
    overflow:hidden;

}

仅供引用，我在 JSFiddle 中复制了这个问题.

Answer 1

当您使用 % 时，宽度可能无法正确划分。假设您有 3 个元素，并且您为每个元素分配了 33% 的宽度。如果浏览器的宽度为 100，那么您的 1 个元素可能会得到 34 作为计算宽度，而其他 2 个得到 33。为了像素完美，请尝试设置一个固定宽度，该宽度是您拥有的元素数量的倍数因此宽度会在您的标题之间平均分配，或者只是为每个单独的标题分配一个固定的宽度。