當頁面被縮放時，ul下拉菜單略有變化

我有一個自動建議下拉菜單的輸入。我遇到的問題是頁面縮放時，ul會從輸入字段略微移動，因此它不再與輸入字段平行或齊平。有沒有更好的方法可以做到這一點？我在這裏有代碼，我也做了一個jsfiddle來演示。當頁面被縮放時，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>

和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(); 

    });

來源

2013-04-07 user2014429

難道你不能調整位置http://jsfiddle.net/kevinPHPkevin/sSXje/1/ – Vector 2013-04-07 16:54:58

對，所以問題在於每個瀏覽器處理文字的縮放位的方式。請注意，大多數瀏覽器可以很好地處理縮放div和其他固定大小的元素，但由於文本，字體要更具體，字符寬度會相當戲劇性地變化，所以會出現像您所遇到的不一致之處。

這個問題很容易通過插入容器div設置爲position: relative，它將輸入和自動完成div緊貼在一起。舒適地？是的，舒服。

Here's a JSFiddle這應該很清楚地解釋一切。

來源

2013-04-07 17:18:39

優秀。謝謝你的解釋和jsfiddle。 – user2014429 2013-04-07 18:14:59

當頁面被縮放時，ul下拉菜單略有變化

回答

相關問題