Question

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

780px的主容器包含一些标签，并且在悬停时它们会改变颜色。

左边的填充物应为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。将宽度推到一个px以下。我认为这是你的问题。

Answer 2

http://jsfiddle.net/joopmicroop/3Wk9F/4/ 这样的事情？它不再跳跃了。

更新评论建议： http://jsfiddle.net/joopmicroop/3Wk9F/10/

Pixel Perfect CSS已关闭

2 个答案: