0

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

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

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

但是当我悬停一个框时，它变成了 178 像素，你可以看到右边有一个永久的 1 像素。

有人可以告诉我是否忽略了一些非常简单的事情。

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;
}​
4

2 回答 2

1

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

于 2012-09-22T14:36:46.577 回答
0

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

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

于 2012-09-22T14:40:32.433 回答