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開始時にborder-rightはありませんが、ホバーすると、その余分な境界線を追加して余分なpxにします. 幅を 1 ピクセル小さくします。それがあなたの問題だと思います。

于 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 に答える