[英]ul drop-down menu shifts slightly when page is zoomed
我有一個帶有自動建議下拉菜單的輸入。 我的問題是頁面縮放時,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();
});
沒錯,因此問題出在每個瀏覽器處理放大文本位的方式上。 請注意,大多數瀏覽器都可以很好地處理div和其他固定大小的元素的放大和縮小,但是由於文本,更具體的字體會極大地改變字符寬度,因此您會遇到不一致的情況。
通過插入一個設置為position: relative
的容器div可以輕松解決此問題, position: relative
將輸入和自動完成div緊密地保持在一起。 依?? 是的,依sn
這是一個JSFiddle ,應該非常清楚地解釋所有內容。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.