在一般瀏覽器中，當(dāng)內(nèi)容超出容器時，如果不是overflow:hidden，通常都會出現(xiàn)滾動條，由于滾動條并不是浮在布局內(nèi)容之上，所以通常會帶來兩個問題：

• 1，容器內(nèi)部內(nèi)容寬度固定，恰好撐滿，此時出現(xiàn)滾動條會把內(nèi)容擠到下一行(如圖1.gif)；

<div class='container'>
    <div></div>
    <div></div>
    <div></div>
 </div>

.container{
    width:300px;
    height:200px;
    background-color:#efefef;
    overflow-y:hidden;
    overflow-x:hidden;
    padding:10px; 
}
.container:hover{
    overflow-y:auto;
}
.container  div{
    display:inline-block;
    margin-right:5px;
    width:92px;
    height:300px;
    background-color:#777;
}

1.gif

• 2，容器內(nèi)容百分比計算，自適應(yīng)寬度，鼠標(biāo)經(jīng)過出現(xiàn)滾動條，鼠標(biāo)離開滾動條消失，會出現(xiàn)中間內(nèi)容晃動(如圖2.gif)

注：相對于上面的變化部分，僅是將內(nèi)部div寬度設(shè)為百分比自適應(yīng)
.container  div{
    width:calc(100% - 6px);
}

2.gif

那么我們?nèi)绾蝸斫鉀Q這兩個問題呢？

我門可以在DOM布局中做些修改，在container內(nèi)部再添加一層class="inner-container"的容器，并讓其寬度=width(container)+width(scroller),如此便不會在出現(xiàn)滾動條的時候?qū)?nèi)容擠下去了，代碼如下

<div class='container'>
    <div class='inner-container'>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

.container{
    width:300px;
    height:200px;
    background-color:#efefef;
    overflow-y:hidden;
    overflow-x:hidden;
    white-wrap:nowrap;
    padding:10px; 
}
.container:hover{
    overflow-y:auto;
}
.container div div{
    display:inline-block;
    margin-right:5px;
    width:92px;
    height:300px;
    background-color:#777;
}
/*添加部分：一般ie中的滾動條寬度是24px*/
.inner-container{
    width:calc(100% + 24px);
}

原理即是，讓包裹子元素內(nèi)部容器inner-container比外部容器container 的寬度大于一個滾動條寬度，這樣即使?jié)L動條出現(xiàn)也不會影響子元素。
一般來說windows下IE的滾動條寬度為24px，所以加上24px即可，如果是在谷歌中既可以設(shè)置滾動條寬度，或者設(shè)置overflow：overlay 也可（不過這個屬性在IE中不兼容）