html - div溢出被隐藏，但仍然可以使用键盘右箭头键滚动

Question

我有一个奇怪的问题，当然，我知道这是一个 css 问题，但无法弄清楚具体问题出在哪里。

在浏览器中，您看不到“whatwedo_container”，因为它的父 div 已溢出隐藏，但是当您按右键或在 ipad 中水平滚动时，可以看到空白区域。

我的HTML代码

<div class="aboutus">
    <div class="about_container">Some visible Content</div>
    <div class="whatwedo_container">Some hidden content</div>
</div>

CSS

.aboutus {
    background: #20407B;
    margin-top: 0;
    overflow: hidden;
    width:100%
}
.about_container {
    margin: 170px auto 0;
    position: relative;
    width: 1100px;
    background:green;
}
.whatwedo_container {
    background: none repeat scroll 0 0 transparent;
    position: absolute;
    right: -100%;
    width: 100%;
    overflow:hidden;
    background:red;
}

jsfiddle:http://jsfiddle.net/squidraj/wsYFh/

请提供任何帮助。提前致谢。

Answer 1

添加position: relative;到.aboutus

检查 http://jsfiddle.net/wsYFh/2/