pet*_*erb 4 html css safari ios
我遇到了一个特别影响iOS上的Safari的问题.
我正在构建一个具有固定位置标题的页面,该标题是视口的宽度.页面的内容是一系列图像(数量可变),应该向右滚动.用户滚动时标题应保留在原位.
在iOS Safari上,固定标题略大于视口,并且还以与其他内容不同的速度滚动.
我已经将代码剪切到以下,仍然无法解决如何解决此问题 - 以下代码在我测试的所有其他浏览器中完美运行.(我的目标是IE8 +)
我在这里举办了这个问题的例子.
感谢您的任何建议和帮助.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style>
html {
font-size: 10px;
height:100%;
white-space: nowrap;
}
body {
height:100%;
padding:0;
margin:0;
}
#dgs2 {
height:75%;
display:inline-block;
}
img{
height: 100%;
}
#pad{
height:6em;
padding-bottom:1px;
}
#header{
position:fixed;
width:100%;
height:6em;
border-bottom:1px solid;
}
.menuRight{
float:right;
}
</style>
</head>
<body>
<div id="header">
<div class="menuRight"><h2>Menu</h2></div>
<h1>Testing scroll on iPhone</h1>
</div>
<div id="pad"></div>
<div id="dgs2">
<img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/>
</div>
</body>
</html>
小智 7
我知道这个问题在这一年已经有一年了,但这个问题在iOS中仍然存在,而且我遇到了与固定元素漂移完全相同的问题,这让我感到疯狂.答案非常简单:只需用div.wrapper包装div #bgs2(或任何元素上有"white-space:nowrap")(显然该类不重要),并将溢出设置为auto:
.wrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
我还添加了webkit-overflow-scrolling,这有助于避免重绘.
未来的某个人肯定会发现这个奇怪的问题,所以希望它有所帮助.