Android 4+浏览器上的固定标头上方的差距

Question

任何想法如何消除滚动期间出现的间隙（在屏幕上）？ 标题位置已固定，差距仅出现在Androd上（在Android 4.0.4上测试）。

负责标题的部分代码：

HTML：

<div data-role="page" id="settings">
    <div class="holo-action-bar">
        <h1><span>Settings</span></h1>
    </div>
    <div class="content content-inner"></div>
</div>

CSS：

.holo-action-bar {
  background-color: #333;
  color: #fff;
  display: block;
  position: fixed;
  top: 0; right: 0; left: 0;
  width: 100%;
  z-index: 1000;
}

您也可以在jquery mobile docs

看到示例

更新

iOS上没有出现此问题（在iOS 5 +上测试）

Answer 1

我找到了解决方案：

这是关于phonegap的CSS问题。

body {
   << height : 100%; don't use it >>
   width: 100%;
   margin:0;
   padding:0;
   top: -1px;
}

HardwareAccelaration：true

Answer 2

但删除你的data-position =“fixed”

上课

<div id="header"><h1>Fixed header!</h1></div>

的CSS：

#header{
 position:fixed;
 top:0;
}

编辑 *

您是否尝试检查内部物体的边距？ 如果它是一个p标签或h1左右它们有标准边距

如果我查看你给的链接顺便说一句我不喜欢jquery mobile因为它提供的问题比它帮助tbh ...但无论如何 它似乎有一个1px左右的边框你有一个链接到你的网站？

Answer 3

我有同样的问题，当我在activity.java中添加这一行时，我意外地解决了这个问题：

mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

android:hardwareAccelerated="true"标记下的清单中的

和<application>。这会尝试禁用软件渲染器以支持硬件渲染器，并且它可以在我的4.0.1设备上运行。

如果您使用带有固定页眉和页脚的webview，您也可能想要添加以下内容，以便页眉/页脚上的闪烁动画消失：

mWebView.setOverScrollMode(View.OVER_SCROLL_NEVER);

Answer 4

当使用带有Cordova 3.0.0的英特尔App Framework 2时，我在Android 4打击垫中的固定标头上方有1个像差距。目标Android版本设置为4.3。

当我在以前的项目中将目标Android版本设置为2.3.3时，问题不存在。

最后我发现当我在AndroidManifest.xml中设置hardwareAccelerated =“false”（在两个地方）时，1 px的差距就消失了。