安卓web app中有横向滚动(水平滚动)的需求时,有时候不能横向滚动?(在pc和ios中都能流畅地滚)

目前(2015年8月3日15:02:24)在大部分安卓手机都发现这个问题,触发bug的条件知道了,但是原因未知。触发bug的条件是需要横向滚动的层不能位于纵向滚动不是body的层下面(后面有具体解释)。

<div style="width: 300px;height: 500px;overflow: auto;">
    <ul style="overflow-x: auto;white-space: nowrap;">
        <li>我是横向滚动的文字,</li>
        <li>我是横向滚动的文字,</li>
        <li>我是横向滚动的文字,</li>
        <li>我是横向滚动的文字,</li>
        <li>我是横向滚动的文字,</li>
        <li>我是横向滚动的文字,</li>
        <li>我是横向滚动的文字,</li>
    </ul>
    <p style="height: 1000px;background-color: black"></p>
</div>

如上html,如果把divheight: 500px;overflow: auto;去掉,纵向滚动的层是body,此时是正常的,安卓中ul能正常地左右滚动。但是当加上它们之后,此时纵向滚动的层变成了div,这时再来拖动ul发现它不能横向滚动了!(但我发现一个奇怪的现象,同样是有横向滚动的弹窗,只要关掉再打开弹窗,就可以正常地横向滚动了,不需要在纵向滚动层为body的情况下也行)

解决方法:1、让滚动的层变回body就行了。2、保证数据量不会造成纵向滚动也行。
但是做web app,不能保证时时都能直接用body作为滚动层的,尤其是在弹窗中的时候,请问有更好,不使用js的解决方法吗?

div包着img时,div的高度希望自适应到与img一样?

因为img是inline的,只要把img设置为block就行

div包着input时,div的高度希望自适应到与input一样?(pc中不会,手机中会)

需要给input一个固定高度

li个li之间总是有空隙?

原来:
<li><span>内容</span></li>
<li><span>内容</span></li>
<li><span>内容</span></li>

解决方法1:
<li><span>内容</span></li><!--
--><li><span>内容</span></li><!--
--><li><span>内容</span></li>

解决方法2:
<li><span>内容</span>
</li><li><span>内容</span>
</li><li><span>内容</span></li>

黒之染
3.1k 声望47 粉丝

两年半个人练习生,喜欢ctrl+c/ctrl+v/delete


« 上一篇
js模块化例子
下一篇 »
mysql记录