边框中额外错位的像素

Question

我做了一个测试 header 来制作我的动画。

红色粗线的作用是如果用户点击它会滑动到下一个header。它适用于“主页”、“关于”和“联系方式”...

但由于某种原因，画廊有一个额外的错位像素。（您可能需要放大）

这是 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。为了像素完美，请尝试设置一个固定宽度，该宽度是您拥有的项目数量的倍数所以宽度在你的 headers 之间平均分配，或者只是为你的每个 headers.

分配一个固定的宽度

边框中额外错位的像素

Extra misplaced pixel in border

html

css

animation

border