Question

我已经使用了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％，依此类推。

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

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

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

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

当你乘以100％和200％时，你不会看到效果，但当你到达700％的最后一个单元格时，你会看到7px的差距。

如果要构建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

遗憾的是，没有干净或优雅的解决方案。

Answer 3

经过一两天寻找变通办法之后，对于Webkit浏览器而言似乎是条件性的JS增强是唯一可行的解决方案。

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

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

绝对定位元素100％宽度在webkit中相对定位的容器bug内

3 个答案: