html - Pixel Perfect CSS 已关闭

Question

我正在运行以下设置。它应该如下所述。 http://jsfiddle.net/maxjs/3Wk9F/7/

780 像素的主容器包含一些选项卡，悬停时它们会改变颜色。

左边的填充应该是29px 右边的填充应该是30px 4 个框每个应该是 179px，并且应该有 5 个 1px 的边框。每个部分之间有 1 个。

但是当我将鼠标悬停在一个框上时，它变成了 178px，正如您所看到的，右侧有一个永久性的 1 px。

如果我忽略了一些非常简单的事情，有人能告诉我吗。

HTML

<div id="maincontainer">
<div class="tab-container">
    <div class="leftfiller"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="rightfiller"></div>
</div>
<div style="clear:both"></div>​

CSS

#maincontainer{
    padding-top:20px;
    width: 780px;
    margin: 0 auto;
    background-color:#000;
    height:600px;
}
.tab-container {
    border-bottom: 1px #BCC0C3 solid;
    border-top: 1px #BCC0C3 solid;
    height:110px;
}
.tab{
    float:left;
    width:180px;
    height:110px;
    background-color:#E5E5E5;
    border-left: 1px #fff solid;
    box-sizing: border-box;
}

.tab:hover {
    background:#fff;
    border-left:1px #BDC0C5 solid;
    border-right:1px #BDC0C5 solid;
    height:111px;
}

.tab:hover + .tab {
    border-left-width: 0;
}
.leftfiller{
float:left;
width:29px;
height:110px;
background-color:#E5E5E5;
}
.rightfiller{
float:right;
width:30px;
height:110px;
background-color:#E5E5E5;
}​

Answer 1

.tag 开始时没有右边框，但是通过悬停，您添加了额外的边框，使其成为一个额外的 px。将宽度减少一像素。我认为这是你的问题。