iOS Safari：100％宽度的固定位置标题比视口宽
我碰到一个问题，特别是在iOS上的Safari影响。
我正在build立一个页面，它有一个固定的位置头是视口的宽度。 页面的内容是一系列应该向右滚动的图像（数量可变）。 用户滚动时，标题应保持原位。
在iOS Safari中，固定标题略大于视口，并以与其余内容不同的速度滚动。
我已经把代码切成了下面的代码，仍然无法解决如何解决这个问题 – 下面的代码完全适用于我testing过的所有其他浏览器。 （我针对IE8 +）
我在这里主持了这个问题的例子。
感谢您的任何build议和帮助。
<!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> 我知道这个问题已经有一年了，但是这个问题在iOS中依然存在，而且我也遇到了与固定元素漂移相同的问题，这让我感到非常紧张。 答案很简单：用div.wrapper（显然这个类是不重要的）包装div＃bgs2（或者任何有“white-space：nowrap”的元素），然后将溢出设置为auto：
.wrapper { overflow: auto; -webkit-overflow-scrolling: touch; }
我还添加了webkit-overflow-scrolling，这有助于避免重新绘制。
有人在未来一定会发现这个奇怪的问题，所以希望它有帮助。
如果你开心使用jQuery，那么你可以使用像这样的东西：
$(window).ready(function() { var bodyWidth = $(window).width(); $("#header").width(bodyWidth).css('width', bodyWidth); });
我包括属性宽度和CSS宽度，只是为了确保它适用于所有浏览器。 另外，如果您将您的元标记更改为：
<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
这也应该有所帮助。
更新1
对不起，我没有正确读取标题的CSS样式。 标题的样式应该如下所示：
#header{ position:fixed; top: 0; // Set these positioning attributes left: 0; // to hold the header in the top left. width:100%; height:6em; border-bottom:1px solid; }
更新2
再次，另一个CSS更新。 我注意到你有如下代码：
html { font-size: 10px; height:100%; white-space: nowrap; } body { height:100%; padding:0; margin:0; } #dgs2 { height:75%; display:inline-block; }
您需要将其更改为如下所示的内容：
html { font-size: 10px; height:100%; } body { height:100%; padding:0; margin:0; } #dgs2 { height:75%; display:inline-block; white-space: nowrap; }
如果你移动的white-space: nowrap; 到#dsg2 div而不是将其分配给html那么这应该是你的最终修复。 另外，将以下内容添加到jQuery代码中，以配合您已有的内容：
$(window).resize(function() { var bodyWidth = $(window).width(); $("#header").width(bodyWidth).css('width', bodyWidth); });