webkit中相对定位容器中的绝对定位元素100％宽度答案

【问题标题】：Absolute positioning element 100% width inside relative positioned container bug in webkitwebkit中相对定位容器中的绝对定位元素100％宽度
【发布时间】：2013-04-22 13:18:54
【问题描述】：

我已经使用了这个positioning trick 来实现复杂的结果。我想我在 webkit 浏览器中遇到了一个我很难理解的错误。

这是简单的标记：

<table>
<tbody>
    <tr>
        <td>
        <div>
            <span class="cols-6"></span>
        </div></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>

和 CSS：

*, *:after, *:before {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
tr {
    border: 1px solid #ddd;
}
td {
    vertical-align: top;
    padding: 0;
    height: 100px;
    border: solid #ddd;
    border-width: 1px 0 0 0;
    box-shadow: -1px 0px #ddd;
}
td div {
    position: relative;
}
td div span.cols-6 {
    position: absolute;
    width: 600%;
    height: 20px;
    background: #ccc;
}

要查看实际情况，请在 chrome 中打开此 http://jsfiddle.net/JFxqt/14/。

显示的 span 绝对位于相对容器内。由于表格使用固定布局，其单元格都是固定宽度，因此孩子应该能够使用百分比宽度。该表有 7 列，而跨度的宽度设置为 600%（即 6 列 * 100%）。它未能涵盖 webkit 浏览器中的所有 6 列。 Firefox 和 IE 完全呈现所有指定的列。

理想情况下，将 span 的宽度设置为 100% 应该在 1 列中呈现，200% 在 2 列中呈现，依此类推。

有人有任何想法或解决方法吗？

【问题讨论】：

看起来您正在创建一个 CSS 框架，所以我假设您将拥有 .cols-1、.cols-2 ... .cols-10 等样式是否正确？

标签： css google-chrome webkit width absolute

【解决方案1】：

试试这个：http://jsfiddle.net/JFxqt/3/

我在你的 CSS 中改变了这个：

body{margin:0px}
td div {

}
span.cols-6 {
    position: absolute;
    width: 85.6%;
    height: 20px;
    background: #ccc;
    z-index:10;
    top:0;
    left:0;
}

【讨论】：

感谢您的快速回复，但不完全是我所追求的。表中有 7 列，跨度仅涵盖其中的 6 列。这意味着用于代替 colspan 的自定义替代品。换句话说，将其设置为 400% 类似于将 colspan 设置为 4。
你去吧，它只涵盖了 7 个盒子中的 6 个。您只需要更改宽度以适应您的需要
再次感谢您的回复，但您的解决方案需要了解标记中指定的列数。我正在尝试获得一种适用于任意数量列的解决方案，而不管页面中的位置如何。即解决方案应该同样适用于jsfiddle.net/JFxqt/6
你需要尝试一些 jquery 然后进行那种计算
嗯，就是这样，我正在尝试找出一个非 javascript 解决方案。我发布的 CSS 应该可以工作（适用于所有非 webkit 浏览器），只是想知道我是否缺少让 webkit 玩球的东西，或者它是否是 webkit 渲染引擎的固有错误？

【解决方案2】：

您看到了一个与表格单元格的宽度如何计算和继承有关的跨浏览器问题。这可能是一个错误，也可能是 CSS 规范未明确指定并由浏览器决定的问题。

在 Firefox 中，<td> 的宽度由 <div> 继承，而在 webkit (Chrome) 浏览器中，子 <div> 继承的宽度小 1px。

当您乘以 100% 和 200% 时，您不会看到效果，但是当您到达 700% 的最后一个单元格时，您会看到大约 7 像素的间隙。

如果你正在构建一个 CSS 框架，你需要为 Firefox 浏览器和 webkit 浏览器创建一个样式。

对于 6 列的情况，我发现以下方法可行：

td div span.cols-6 {
    position: absolute;
    left:-1px;
    width: 600%;
    border-right: 6px solid #ccc;
    height: 20px;
    background: #ccc;
}

我添加了一个 600% x 1px = 6px 的右边框，然后将跨度向左定位 -1px。对于其他列数，例如.cols-3，您将需要width: 300% 和border-right: 3px solid #ccc 等等。

您可能需要使用某种类型的 CSS 过滤器或选择器技巧。我确实找到了以下参考：http://browserhacks.com

不幸的是，这个问题没有干净或优雅的解决方案。

【讨论】：

我见过calc的功能，但没试过。它可能还没有得到很好的支持。你绝对需要桌子吗？问题在于浏览器如何围绕表格单元格宽度进行数学运算......很难解决这个问题。
这正是我所认为的 Marc，尽管它看起来比这更烦人。您可以使用新的 css3 calc 函数来执行类似 jsfiddle.net/JFxqt/10 的操作。然而，即使这样仍然没有产生预期的结果。当您调整窗口大小时。观看栏是否在 jsfiddle 上调整浏览器/容器的大小。
我明白你的意思。你能告诉我灰色条将如何使用吗？它将包含什么类型的内容？您需要什么样的灵活性/流畅/响应式行为？
是的，不幸的是，同样的问题存在构建一个更复杂的基于 div 的解决方案并使用 display:table display:table-cell 等。不过我可能不走运，想不出任何解决方法似乎适用于 webkit。
为什么灰色条一定要嵌入表格内？

【解决方案3】：

在寻找解决方法一两天之后，Webkit 浏览器的条件 JS 增强似乎是唯一可行的解决方案。

问题源于 Webkits（和 Opera 的旧渲染引擎）计算百分比宽度，总是向下舍入到最接近的像素，而不是存储为双精度。因此，在 Webkit 中，可能会为每个 100% 的因子添加 1px 的差异（例如 2300% - 100% * 23 - 将有最大 23px 的差异），而 Firefox 和更高版本的 IE 最多只能有 1px 的差异.

John Resig 不久前谈到了这个问题，http://ejohn.org/blog/sub-pixel-problems-in-css/

【讨论】：