1

我在表格元素上绝对定位 DIV 有问题。我有一个设置绝对位置并设置顶部位置以显示确切位置的 DIV。现在在 chrome 浏览器中缩放 (ctrl +) 时发生了什么，DIV 位置已更改为缩放级别 125、150、175 ... 等。但是缩放级别 100,200、300 ......（100 的倍数）它显示相同的位置。问题是除 100 倍缩放级别之外，DIV 位置发生了变化。我该如何解决这个问题？
我在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;
        }
4

1 回答 1

1

我唯一可以建议在缩放下保持相同外观的唯一方法是将您的表格和“apptest” div 放在同一个容器中：

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

见小提琴：http: //jsfiddle.net/mJcsb/4/

但是，您受制于完全专有的算法（Chrome 的缩放算法），因此在缩放下布局中的任何不规则性都是完全可能的。

于 2013-09-12T06:08:40.623 回答