使用HTML5时,如果在canvas/中放置一个/ video/ audio/ svg元素div,则4px这些元素下方会有间隙.我在几乎所有支持HTML5的浏览器中测试了下面的代码,不幸的是它们都有同样的问题.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bug</title>
</head>
<body>
<div style="border: 1px solid blue">
<canvas width="200" height="100" style="border: 1px solid yellow"></canvas>
</div>
</body>
</html>
当使用[ -webkit-overflow-scrolling:touch ;]时,滚动区域运行良好,但它会导致触摸事件停止滚动区域的工作.有人有同样的问题吗？谁可以给我一些关于这个新滚动功能的官方链接？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ios5 scroll</title>
<style type="text/css">
header {
background: red;
width: 300px;
height:44px;
}
.scroll {
width: 300px;
height:300px;
background: yellow;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="container">
<header>
<button onclick="alert('header');">won't work?</button>
</header>
<div class="scroll">
<button onclick="alert('scroll');">It works</button>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
</div>
</div>
</body>
</html>
2011-12-27:我已经解决了这个问题,但我仍然难怪真正的原因.在我的例子中,我在一个网页中有几个部分,每个部分都有一个滚动区域和一个标题,每次只显示一个部分,并使用css3动画结合转换切换部分.当在所有部分的滚动区域中添加[-webkit-overflow-scrolling]时,触摸事件会随机停止工作,所以我只是在当前显示的部分中添加[-webkit-overflow-scrolling]并在部分为时将其删除隐.这很好但我仍然不知道是什么原因引起了这个问题.