Question

我对表格元素的绝对定位DIV有问题。我有一个DIV设置绝对位置并设置顶部位置以显示确切的位置。现在，在缩放（ctrl +）时，Chrome浏览器中发生了什么，DIV位置已经在缩放级别125,150,175 ......等处更改。但是缩放级别100,200,300 ......（100的倍数）它显示的位置相同。问题不是DIV位置改变的100倍缩放级别的倍数。我该如何解决这个问题呢？我在jsfiddle中创建了示例页面。请在Chrome浏览器中运行页面并缩放浏览器（ctrl +）红色DIV位置会发生变化，这就是问题所在。我真的希望有人找到解决方案。

HTML：

 <table width="700px" class="custom">
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
</table>
<div>
    <div class="apptest">
    </div>
</div>

CSS：

    table
{
border-collapse:collapse;
}
.custom tr td
        {
            height:20px;
            border:1px solid;
           background-color:White;
        }
        .apptest
        {
            height:70px;
            width:400px;
            position:absolute;
            top:239px;
            left:10px;
            background-color:Red;
        }

Answer 1

我唯一可以建议在缩放下保持相同的外观是让你的桌子和你的“apptest”div在同一个容器中：

<div class="container">
  <table class="custom">...</table>
  <div class="apptest"></div>
</div>

请参阅小提琴：http://jsfiddle.net/mJcsb/4/

你可以使用完全专有的算法（Chrome的缩放算法），因此在缩放下布局中的任何不规则都是完全可能的。

Chrome缩放问题：缩放时改变绝对Div顶部位置（Ctrl +）

1 个答案: