1

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

4

3 回答 3

0

使用这样风格的容器；

.Container {
    margin-right: auto; 
    margin-left: auto;
    width: 500px;
}
于 2013-09-17T08:44:00.593 回答
0

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

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

如果您无论如何都想使用绝对定位和表格，请注意这是一个肮脏的解决方案，并且可能随时中断。在这种情况下，我建议您使用基于百分比的绝对定位，以便框随着缩放流动（顺便说一句，在每个浏览器中都难以预测和规范化）。

IE

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

你的一个叉子摆弄绝对定位的百分比（这里的糟糕解决方案警告） ：http : //jsfiddle.net/U4TGd/

请记住，同样，这是一个糟糕的解决方案，并且混合百分比和像素通常是一个坏主意。如果您有时间或可能，请转换基于表格的设计并使用 div 代替选项卡。

于 2013-09-17T09:36:36.923 回答
0

不是 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会以不同的方式渲染表格单元格。

于 2013-09-17T09:46:50.730 回答