Javascript 放大页面时,ul下拉菜单会轻微移动

Javascript 放大页面时,ul下拉菜单会轻微移动,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个带有自动建议下拉菜单的输入。我遇到的问题是,当页面被缩放时,ul会稍微偏离输入字段,因此它不再与输入字段平行或齐平。有更好的办法吗?我这里有代码,我还做了一个演示 .suggestionsBox { position:absolute; top:24px; left:37px; width:200px; padding:0px; background-color:fff; } .suggestionList { margin:0px; padding:0

我有一个带有自动建议下拉菜单的输入。我遇到的问题是,当页面被缩放时,ul会稍微偏离输入字段,因此它不再与输入字段平行或齐平。有更好的办法吗?我这里有代码,我还做了一个演示

.suggestionsBox
{
  position:absolute; 
  top:24px;
  left:37px;
  width:200px;
  padding:0px;
  background-color:fff;
}
.suggestionList
{
  margin:0px;
  padding:0px;
}
.suggestionList ul li 
{
  list-style:none;
  margin: 0px;
  padding:6px;
}
.suggestionList ul li:hover 
{
 background-color: #DAD6D6;
 color:#000;
}
ul
{
 font-size:12px;
 padding:0;
 margin:0;
 border:1px solid grey;
 border-top:none; 
}
.load
{
  background-position:right;
  background-repeat:no-repeat;
}
table
{
  border-collapse:collapse; 
}
#suggest 
{
  position:relative;
}
#email
{
  outline: none; 
  width:200;color:grey;
  border:1px solid grey;
  padding:2;
} 

<div id = "suggest">
<div>
  <table>
    <td>email:</td>
    <td><input type = "text" id = "email" autocomplete = "off" placeholder = "type something then zoom" /></td>
  </table>

<div class="suggestionsBox" id = "suggestions" style = "display: none;">
<div class="suggestionList" id = "suggestionsList">
</div></div></div></div>
.suggestionsBox
{
位置:绝对位置;
顶部:24px;
左:37像素;
宽度:200px;
填充:0px;
背景色:fff;
}
.建议列表
{
边际:0px;
填充:0px;
}
.建议列表ul li
{
列表样式:无;
边际:0px;
填充:6px;
}
.建议列表ul li:悬停
{
背景色:#DAD6D6;
颜色:#000;
}
保险商实验室
{
字体大小:12px;
填充:0;
保证金:0;
边框:1px纯灰;
边界顶部:无;
}
负载
{
背景位置:右;
背景重复:无重复;
}
桌子
{
边界塌陷:塌陷;
}
#暗示
{
位置:相对位置;
}
#电子邮件
{
大纲:无;
宽度:200;颜色:灰色;
边框:1px纯灰;
填充:2;
} 
电邮:
还有javascript:

$('#email').bind('keyup',function() {

            if($('#email').val().length >0) {

                $('#suggestions').show();
                $('#suggestionsList').html("<ul><li>now zoom in or out</li><ul>");
          }else $('#suggestions').hide();

     });
$('#email').bind('keyup',function(){
如果($('#email').val().length>0){
$(“#建议”).show();
$(“#建议列表”).html(“
  • 现在放大或缩小”
    • ”; }else$('#建议').hide(); });
没错,所以问题在于每个浏览器处理文本位放大的方式。请注意,大多数浏览器都可以很好地处理缩放div和其他固定大小的元素,但由于文本(更具体地说,字体)会显著地改变字符宽度,因此会出现类似于当前的不一致

通过将容器div集插入到
位置:relative
,将输入和自动完成div紧紧地放在一起,问题就很容易解决了。依偎?是的,依偎着


这应该能很清楚地解释一切。

你不能调整一下位置吗