Question

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

HTML：

<div class="container">
<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;
        }

.container {
    position: relative;
}
        .apptest
        {
            height:70px;
            width:400px;
            position:absolute;
            top:185px;
            left:0px;
            background-color:Red;
        }

链接：http://jsfiddle.net/mJcsb/5/

Answer 1

使用具有这种风格的容器;

.Container {
    margin-right: auto; 
    margin-left: auto;
    width: 500px;
}

Answer 2

我不会在这些时候讨论桌子是不是很糟糕的选择。但这里的绝对定位是一个非常糟糕的主意。

我不知道你要做什么以及你的目标是什么，但是你可以使用div来获得不同的（可能更好的）解决方案;在这种情况下，包含你的“红色”div的div只会包含它，呵呵！

如果您想要绝对定位和表格，请注意这是一个肮脏的解决方案，可能会随时中断。在这种情况下，我建议你使用基于百分比的绝对定位，以便盒子随着缩放一起流动（顺便说一下，很难预测并在每个浏览器中标准化）。

即

.apptest
    {
        height:70px;
        width:400px;
        position:absolute;
        top:61.2%;
        left:0px;
        background-color:Red;
    }

你的绝对定位百分比（这里的解决方案警告）：http://jsfiddle.net/U4TGd/

请记住，再次，这个是一个糟糕的解决方案并且混合百分比和像素往往是一个坏主意。如果您有时间或可能，请转换基于表格的设计并使用div而不是标签。

Answer 3

它不是正在改变的div位置，我们的眼睛与div位置相关的位置正在改变（在这种情况下是每个单元格的表边界）。

我通过一些测试发现了这个，

使用此css知道绝对位置div处于准确位置。

.custom tr td {
    height:20px;
    border:0px solid;
}
.container {
    position: relative;
    height:185px;
    background:#0F6;
}
.apptest {
    height:70px;
    width:400px;
    position:fixed;
    top:185px;
    left:0px;
    background-color:Red;
}

所以你对绝对定位DIV没有问题，但也许chrome会以不同的方式渲染表格单元格。

在Chrome浏览器中缩放（Ctrl +）时，Absolute Div顶部位置发生了变化

3 个答案: