安卓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,如果把div
的height: 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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。