css - Webkit中相对定位的容器内的绝对定位元素的宽度为100％

我已经使用了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/。

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

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

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

最佳答案

试试这个：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;
}

关于css - Webkit中相对定位的容器内的绝对定位元素的宽度为100％，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16148155/