修复了Android webapp中的标题

Question

我正在使用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个像素的间隙。看一下屏幕截图：screenshot http://i41.tinypic.com/2u5cfg5.png。

我在SO中尝试了各种建议（例如fixed header displayed over content, but there is a gap at the top,）但到目前为止没有一个对我有效。还有更多想法吗？

代码的相关部分在这里：（http://jsfiddle.net/tZwyW/3/）。该问题不会出现在桌面浏览器上。