Android股票浏览器不尊重CSS溢出
Posted
技术标签:
【中文标题】Android股票浏览器不尊重CSS溢出【英文标题】：Android Stock Browser Not Respecting CSS Overflow 【发布时间】：2014-02-16 02:48:04 【问题描述】：我正在与一位客户合作，他希望他们的部分界面具有某种定制的滚动方法。他们不希望通常的滚动条可见；他们希望台式机/笔记本电脑用户用鼠标滚轮/触摸板滚动，他们希望移动用户用手指滚动。他们还希望使用向上箭头和向下箭头的图形来提供另一种滚动方法，并使用户可以清楚地看到滚动是可能的（因为实际的滚动条是隐藏的）。客户端设置了这种滚动方式。
我整理了一些代码，这些代码适用于我尝试过的所有设备/浏览器组合，除了 android 的股票浏览器。我已经通过以下配置确认了这个问题：
Android 4.1.2（模拟器） Android 4.2.2（实际设备） Android 4.2.2（模拟器） Android 4.3（模拟器）这个问题在 Android 4.4.2（模拟器）上不存在。
为了简化这个问题，我不包括向上和向下箭头的图形以及随附的逻辑。
这是代码 (jsFiddle demo)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
#side_nav, .category
position: absolute;
#side_nav
-webkit-user-select: none;
.category
display: none; /* Will be shown when user clicks on an option */
top: 0;
left: 150px;
.ul_wrapper, .ul_wrapper ul
width: 125px;
height: 242px;
.ul_wrapper
background: #ccc;
border: 3px solid #000;
border-radius: 6px;
text-align: center;
overflow: hidden;
ul
margin: 0;
padding: 0;
list-style: none;
overflow-y: scroll;
li
padding-top: 10px;
li:last-child
padding-bottom: 10px;
span
display: inline-block;
width: 100px;
height: 100px;
border: 3px solid #999;
border-radius: 6px;
cursor: pointer;
#chosen_option
float: left;
margin-left: 150px;
</style>
</head>
<body>
<div id="side_nav">
<div class="ul_wrapper">
<ul>
<li>
<span>Option 1</span>
<div class="category">
<div class="ul_wrapper">
<ul>
<li><span>Option 1a</span></li>
<li><span>Option 1b</span></li>
<li><span>Option 1c</span></li>
</ul>
</div>
</div>
</li>
<li>
<span>Option 2</span>
<div class="category">
<div class="ul_wrapper">
<ul>
<li><span>Option 2a</span></li>
<li><span>Option 2b</span></li>
</ul>
</div>
</div>
</li>
<li>
<span>Option 3</span>
<div class="category">
<div class="ul_wrapper">
<ul>
<li><span>Option 3a</span></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="chosen_option"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function get_scrollbar_width()
var div, body, W = window.browserScrollbarWidth;
if (W === undefined)
body = document.body, div = document.createElement('div');
div.innerHTML = '<div style="width: 50px; height: 50px; position: absolute; left: -100px; top: -100px; overflow: auto;"><div style="width: 1px; height: 100px;"></div></div>';
div = div.firstChild;
body.appendChild(div);
W = window.browserScrollbarWidth = div.offsetWidth - div.clientWidth;
body.removeChild(div);
return W;
var scrollbar_width = get_scrollbar_width();
$('#side_nav ul').css(
'padding-right': scrollbar_width,
'margin-left': scrollbar_width / 2
);
$('span').on('click', function(event)
event.stopPropagation(); // Prevent $('html').click(); from triggering
var parent_li = $(this).parent();
var child_category = parent_li.children('.category');
if (child_category.length)
var show_div = false;
if (child_category.is(':hidden'))
show_div = true;
parent_li.siblings().find('.category:visible').fadeOut();
if (show_div)
child_category.fadeIn();
else
parent_li.find('.category:visible').fadeOut();
else
$('#chosen_option').html('You chose ' + $(this).html().toLowerCase());
$('.category:visible').fadeOut();
);
$('html').click(function()
$('.category:visible').fadeOut();
);
</script>
</body>
</html>当您点击三个选项中的任何一个时，右侧会出现第二个选项列表。但是，除非您从 ul CSS 规则中删除 overflow-y: scroll;，否则它永远不会出现在 Android 的股票浏览器上，但随后您将无法再滚动。
最好通过在.category CSS 规则中将left: 150px; 替换为left: 25px; 来说明问题。当我这样做时，这就是它在工作浏览器中的样子：
这就是它在 Android 的股票浏览器中的样子：
我应该注意的另一件事是它适用于 Android 版 Chrome。
有没有办法让我在 Android 的股票浏览器中进行这项工作？
【问题讨论】：
尝试将z-index:10; 添加到.category 以使其向前推进。
@reese 这并没有解决问题。不过，谢谢。
@nick 好久不见，你是怎么解决的？
@KilianSchefer 我最终删除了所有的嵌套并编写了 javascript 来显示或隐藏适当的东西。我不喜欢依赖 JavaScript，但是对于这个特定的网站，无论如何都绝对需要 JavaScript。
【参考方案1】：
我在使用 Gingerbread Android 浏览器时遇到了问题。它根本不能很好地处理溢出 CSS 属性。为了在此浏览器上启用滚动，我必须仅将溢出（“滚动”或“自动”）应用于 BODY 容器。
【讨论】：
感谢您的信息。就我而言，我只关心 Android 4.0 及更高版本，我相信它涵盖了超过 75% 的 Android 用户。【参考方案2】：我相信 Android 普通浏览器不支持 x/y 特定的溢出属性。不要打开overflow-y，而是打开overflow，然后关闭overflow-x。示例：
ul
margin: 0;
padding: 0;
list-style: none;
overflow-y: scroll;
应该变成：
ul
margin: 0;
padding: 0;
list-style: none;
overflow: scroll;
overflow-x: visible;
通常我使用自动而不是滚动，因此如果不需要，滚动条不会显示。此外，也许overflow-x: hidden; 在您的情况下可能更可取。基本上，这会将您想要的溢出-y 属性也应用于溢出-x，但通常这比完全忽略规则更可取。对于支持特定轴溢出的浏览器，用户不会知道其中的区别。
【讨论】：
很遗憾，这不起作用。我认为这与here 解释的行为有关。此外，Android 的 stock 浏览器似乎支持 x/y 特定的溢出属性很好（我使用 Android 4.2.2 的 stock 浏览器测试了this page 和 this page）。最后，为了解释为什么我在ul CSS 规则中有overflow-y: scroll;，将其设置为auto 会导致选项2 和3 选项不居中。感谢您的尝试！
很高兴您找到了有关该问题的更多信息，尽管该帖子中似乎没有解决方案。我发布的内容与 IE8 特别相关，并且经常为我工作，希望它也可以与 Android 股票相关。以上是关于Android股票浏览器不尊重CSS溢出的主要内容，如果未能解决你的问题，请参考以下文章