webkit中相对定位容器错误内的绝对定位元素100%宽度

Question

我曾经使用过这种定位技巧来实现复杂的结果。我想我在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;
}

要查看此操作，请打开此http://jsfiddle.net/JFxqt/14/铬。

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

理想情况下，将跨度的宽度设置为100%应该在1列上渲染，在2列上渲染200%，依此类推

有人有什么想法或解决办法吗？

Answer 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;
}

Answer 2

您看到了一个与如何计算和继承表单元格宽度有关的跨浏览器问题。这可能是一个bug，也可能是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%x1px=6px的右边框，然后将跨度向左放置-1px。对于其他列数，例如.cols-3，则需要width: 300%和border-right: 3px solid #ccc，依此类推

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

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

Answer 3

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

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

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