css - Chrome 问题：overflow-x 元素通过拖动滚动

Question

如题。下面是win7/Chrome27/IE9/FF22中的测试。

风格：

.outer{
    width : 400px;
    height: 400px;
    overflow: hidden;
    overflow-x : hidden;
    overflow-y : auto;
}

.inner{
    border-left:400px solid red;
    border-right: 400px solid green;
    height: 600px;
    text-align: center;
    line-height: 400px;
}
</style>

html:

    <div class="outer">
        <div class="inner">
        </div>
    </div>

在 IE/FF 中只能看到左边的红色部分。

但在 Chrome 中，内部元素可能被拖到右侧。这是 chrome 的问题吗？以及如何避免？

正常（即/ff）：

非正常（铬）：

jsfiddle：http: //jsfiddle.net/LULDC/

Answer 1

添加溢出：y; 到你的 .inner 类

.inner{
    border-left:400px solid red;
    border-right: 400px solid green;
    height: 600px;
    text-align: center;
    line-height: 400px;
    overflow:y;
}

http://jsfiddle.net/LULDC/

不再需要通过单击和拖动来滚动！