テーブルにこのフォームがあり、テキスト入力の 1 つに提案ボックスがあります。ページが 90% に縮小されると、提案ボックスの div が約 6 ピクセル上下に移動します。ズーム時にdivを同じ位置に保つ方法はありますか? ありがとう。ここに実証するjsfiddleがあります
html:
table {
border:1px solid grey;
}
#box {
border:1px solid red;
width:150px;
position:absolute;
top:35px;
left:41px;
background-color:white;
}
<table>
<tr>
<td>one</td>
<td><input></td>
</tr><tr>
<td>two</td>
<td><input type = "button" id = "showBox" value = "click then zoom out"></td>
</tr>
</table>
<div id = "box" style = "display:none;">
<ul>
<li>now zoom out</li>
</ul>
</div>
JavaScript:
$('#showBox').click(function(){
$('#box').show();
});