Question

我正在使用phonegap构建一个Android应用程序。问题是，当我点击输入框时，顶部div会向右移动一点点。

HTML：

<div id="top">

<img src="icon-menu.svg" width="40" height="41"
onerror="this.onerror=null; this.src='icon-menux.png' ; this.height='35' ;" class="show       a">
<a href="index.html">
<img src="home.png" width="50" height="41" id="home" >
</a>
</div>
<input id="filter" placeholder="Enter game title" type="text"/>

CSS：

#filter{width:100%;
height:35px;
font-size:20px;
background-color:#F2F2F2;
color:#FF3300;
text-align:center;
z-index:20;
margin-top:70px;
positon:absolute;

}

#top{background-color:#434343;
border-bottom:5PX SOLID #888888;
height:50px;
width:100%;
position:fixed;
z-index:50;
display:block;
float:left;
}

更新：我发现了问题的根源。当我删除此代码时，它不会发生

<meta name="viewport" content="width=device-width, user-scalable=0">

但问题是，当我删除此标记时，顶部div在我滚动时向上移动，这不应该发生，因为我已经指定z索引和位置固定。

由于我没有足够的声誉，我无法发布图片.Srry

Answer 1

我有一个类似的问题，有人很友善地回答，我认为同样适用于你！

这是因为ChromeView为一个聚焦元素添加了一个边框，听起来它推动了其他所有内容。

将此内容添加到您的css文件顶部，告诉浏览器在重点关注时停止突出显示字段;

* { outline: none !important; }

单击输入框可移动div

1 个答案: