gpt4 book ai didi

android - Android 4.2.2 Stock 浏览器上的 Overflow-x

转载 作者:行者123 更新时间:2023-11-28 07:31:40 27 4
gpt4 key购买 nike

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

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

我创建了一个代码笔来演示基本问题: 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>

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

我花了几个小时试图找出发生这种情况的原因,更重要的是,寻找解决方法,但到目前为止还没有成功。

非常感谢任何帮助。

谢谢

最佳答案

我假设 <li>元素设置为 display: inline-block为了水平隐藏它们。如果是这样,您的问题是 .container元素不是 <li> 的父元素.

实际父级 - ul.pages - 默认为 overflow: auto出于某种原因在这个浏览器中。将其设置为 overflow-x: hidden你应该没事。

关于android - Android 4.2.2 Stock 浏览器上的 Overflow-x,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31472718/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com