我正在使用 phonegap 在 Android 中创建一个 HTML5 应用程序。我正在 Android 设备版本 2.3.6 上测试我的代码。我没有使用 Jquery mobile 或任何其他框架。一切都只是 HTML、CSS 和 jQuery。我想要一个固定的标题。这就是我的 CSS 目前的样子:
.header {
position:fixed;
top:0px;
left:0px;
right:0px;
width:100%;
height:2em;
line-height:2;
text-align:center;
font-size:x-large;
font-weight:bold;
color:#f6f6f6;
background-color:#00539e;
z-index:2000;
padding-left:2em;
padding-right:2em;
-webkit-box-sizing:border-box;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
在我单击输入字段并打开软键盘之前,一切正常。键盘打开的那一刻,标题的顶部和左侧出现 1 个像素的间隙。看看截图: 。
我在 SO 中尝试了各种建议(例如,在内容上显示的固定标题,但顶部有一个空白,)但到目前为止没有一个对我有用。还有什么想法吗?
代码的相关部分在这里:( http://jsfiddle.net/tZwyW/3/)。该问题不会出现在桌面浏览器上。