边框中的额外错位像素

Question

我做了一个测试标题来完成我的动画。

如果用户点击它，那么粗红线的作用是滑动到下一个标题。它适用于Home，About和Contact ......

但出于某种原因，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>

点击操作：

$("#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个。为了完美像素，尝试设置固定宽度为＆＃39 ;是您拥有的项目数量的倍数，因此宽度在标题之间平均分配，或者只为每个标题分配固定宽度。