缩放时保持建议框DIV相对于输入框的位置

Question

我在一张表格中使用了一个表单，其中一个文本输入框有一个建议框。当页面缩放至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();
});

- user2014429

Answer 1

我已更新你的fiddle。

将盒子移动到相应的<td>中。尽管仍然有一些闪烁，但比以前好了。希望符合你的标准 :)

- Zubzob