Question

我在运行Android 4.2.2的HTC One X上的股票浏览器上遇到了一个奇怪的问题。

我有一个容器div，overflow-x设置为hidden，overflow-y设置为auto，它有固定的宽度和高度尺寸。子内容的宽度和高度超过其父级。这个想法是你应该能够垂直滚动而不是水平滚动。我见过的每个浏览器都表现正常，我得到了预期的效果。但是，在这个Android Stock浏览器上，我可以自由地水平和垂直滚动，这不是我想要的，因为overflow-x：hidden应该阻止水平滚动。

我已经创建了一个codepen来演示基本问题： http://codepen.io/anon/pen/YXjZKR

这里也是代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1' />
    <style>


    .container{
        width: 300px;
        height: 500px;
        overflow-x: hidden;
        overflow-y: auto;

    }
    ul.pages {
        position: relative;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }
    li {
        width: 300px;
        line-height: 500px;
        display: inline-block;
        margin: 0;
        padding: 0;
        vertical-align: top;
        text-align: left;
        white-space: normal;
        height: auto;
    }
    li.one {
        background-color: red;
    }
    li.two {
        background-color: yellow;
    }
    li.three {
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="container" id="container">
        <ul class="pages">
            <li class="one">Hello<br /><br /></li>
            <li class="two">good</li>
            <li class="three">bye</li>
        </ul>
    </div>
</body>

我还注意到，如果我将子内容的高度缩短到小于容器，那么内容也不再水平滚动。不幸的是，内容总是比容器高。

花了好几个小时试图弄清楚为什么会发生这种情况，更重要的是，寻找解决方法但到目前为止没有运气。

任何帮助都会非常感激。

由于

Answer 1

我假设display: inline-block元素设置为.container以便水平隐藏它们。如果是这样，那么您的问题是<li>元素不是ul.pages的父级。

由于某种原因，实际的父级 - overflow: auto - 在此浏览器中默认为overflow-x: hidden。将其设置为store (\%hash, "/home/chankey/secondscript.$$") or die "could not store"; system("perl", "secondscript.pl", $$) == 0 or die "error";，您应该没问题。

Android 4.2.2股票浏览器上的Overflow-x

1 个答案: