0

我已经使用了这个定位技巧来实现复杂的结果。我想我在 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% 等等。

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

4

3 回答 3

0

试试这个：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;
}
于 2013-04-22T13:26:38.967 回答
0

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

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

当您乘以 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 过滤器或选择器 hack。我确实找到了以下参考：http ://browserhacks.com

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

于 2013-04-22T15:55:04.767 回答
0

在寻找解决方法一两天之后，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/

于 2013-04-24T14:53:13.647 回答