Chrome 中的 Resizable Div 在缩放时会导致内容偏移答案

【问题标题】：Resizable Div in Chrome Causes a Content Shift When ZoomedChrome 中的 Resizable Div 在缩放时会导致内容偏移
【发布时间】：2012-09-27 17:06:38
【问题描述】：

我正在使用 Jquery UI 可调整大小的插件。当发生调整大小时，我用适当的偏移量更新另一个 div 以保持其位置。当以 100% 缩放时，这一切都可以在 Chrome 中正常工作。如果我放大到 90%，有时第二个 div 中的表格会向下移动到第一个 div 下方。

HTML：

<div>
    <div class="left"></div>
    <div class="right">
        <table><tr><td>Blah</td></tr>
            <tr><td>Blah</td></tr>
            <tr><td>Blah</td></tr>
            <tr><td>Blah</td></tr>
        </table>
    </div>
</div>

Javascript：

$(".left").resizable({
    resize: function ()
    {
        $(".right").css({marginLeft:$(this).width() + "px"});
    }
});

CSS：

div
{
  display:block
  position:absolute;
}
.left
{
  width:99px; 
  height:500px;
  background-color:gray;   
  display:block;
  float:left;
  position:relative;
}
.right
{
    margin-left:99px;
    background-color: blue;
    display:block;
    position:relative;
}

table
{
    width:100%;
}

我的问题是，如何正确计算 .right div 的左边距？

要重现该问题，请将 chrome 缩放到 90% 并在此小提琴中调整左侧元素的大小：http://jsfiddle.net/johnkoer/FyE6f/45/

【问题讨论】：

标签： jquery html css jquery-ui

【解决方案1】：

-------------编辑--------------- 新答案http://jsfiddle.net/FyE6f/55/

（看起来只是将溢出设置为自动可能和下面的代码一样有效）

$(".left").resizable({
    resize: function ()
    {
        $(".right").css({overflow:"hidden"});
        $(".right").css({marginLeft:$(this).width() + "px"});
    },
    stop: function ()
    {
        $(".right").css({overflow:"auto"});
    }
});

--------旧---------

我能够修复它的唯一方法是在边距上添加 1，不幸的是它在 div 之间添加了一个丑陋的白色 1px 空间。 http://jsfiddle.net/FyE6f/53/

$(".right").css({marginLeft:($(this).width() + 1) + "px"});

【讨论】：

添加了一个更好的答案看看。