0

自動提案のドロップダウン メニューを使用した入力があります。私が抱えている問題は、ページがズームされると、ul が入力フィールドからわずかにずれるため、入力フィールドと平行またはフラッシュしなくなることです。これを行うためのより良い方法はありますか？ここにコードがあり、デモ用にjsfiddleを作成しました。

.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>

そして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();

     });
4

1 に答える 1

1

そうですね、問題は各ブラウザーがテキストのビットのズームを処理する方法にあります。ほとんどのブラウザーは、div やその他の固定サイズの要素のズームインとズームアウトを非常にうまく処理できますが、テキスト、より具体的にはフォントが文字幅を大幅に変更するため、あなたが持っているような矛盾が生じます。

この問題はposition: relative、入力とオートコンプリート div をぴったりと保持するコンテナー div セットを挿入することで簡単に解決できます。ぴったり？ええ、ぴったり。

これは、すべてを非常に明確に説明するJSFiddleです。

于 2013-04-07T17:18:39.550 に答える