html – 折叠边框模型在网络浏览器中的实现是否有效？

我一直试图从CSS 2.2规范中了解 this excerpt一段时间没有成功(大胆的选择是我的)：

UAs must compute an initial left and right border width for the table by
examining the first and last cells in the first row of the table. The left border width of the table is half of the first cell’s collapsed left border,and the
right border width of the table is half of the last cell’s collapsed right
border. If subsequent rows have larger collapsed left and right borders,
then any excess spills into the margin area of the table.

The top border width of the table is computed by examining all cells who
collapse their top borders with the top border of the table. The top border
width of the table is equal to half of the maximum collapsed top border.

这就是Chrome中实现边框，崩溃等(FF和IE> 7是一样的)：

table {
  border: 6px solid green;
  border-spacing: 0;
  border-collapse: collapse;
}
#cell_1_1 {
  border: 28px solid red;
}
#cell_2_1 {
  border: 12px solid chartreuse;
}
#cell_2_2 {
  border: 2px solid cyan;
}

虽然我期待着这样的事情：

我期待桌子的左边框是14像素厚。因为第一个单元格#cell_1_1的折叠左边框宽度为28px(表格的左边框宽度是第一个单元格的折叠左边框的一半)，而左侧的边框在单元格和表格之间分割。因此，视觉上表格在第一个单元格附近有28 px边框，但14像素属于第一个单元格的边框。然后边框对于桌子的左侧保持不变。如果一些单元格的边框更宽，那么它们将向左突出，而不会影响桌面的左边界。

与上边界同样的事情。

另外我还以为这个问题可能与摘录中的初始词有关，也就是说这些规则只适用于表没有指定边框的情况，但事实证明是无关的(删除表的边框样式规则简单地删除绿色边框)。

任何人都可以回答下一个问题：

> Chrome，FF，IE中的这种崩溃边框模型的实现是否正确？
>如果它们是正确的，我对于规范的理解有什么问题？

现在，如果我们反过来，并将Chrome的实现作为出发规范的起点，这部分应该是下一个(我只保留与左边界相关的部分简洁)：

UAs must compute an initial left and right border width for the table which is then used to position the table relatively to its containing block by
examining the first and last cells in the first row of the table. The left border width of the table is half of the first cell’s collapsed left border after all border conflicts if any have been resolved

…

If subsequent rows have larger collapsed left and right borders,
then any excess spills into the margin area of the table.

…

Any borders that spill into the margin are taken into account when
determining if the table overflows some ancestor (see ‘overflow’),but do not affect the position of the table relatively to its containing block

那么摘录会有意义。

这里有一个表格，比第一个单元格的宽度大于包含粉红色背景的内容块(我们可以看到，表格的边框是选择在第一个单元格的边框上，因为它更宽，然后是这个边框用于将桌子放在容器内，后续单元格的宽边框突出超出桌面的边框)：

在这里，与第一个单元格的边界相比，表格宽度大于表的边界，这是在边框冲突解决时被选中的。而这边框用于将表相对于容器放置：

解决方法

答案是不。”我喜欢CSSWG讨论的坦率， current draft of the CSS Tables 3 editors’ draft的注释告诉你所有你需要知道的这个问题。

Since browsers
handle this so differently,convergence cannot happen without
reimplementation. …

… some combinations are not well-posed problems,so no
rendering algorithm Could be optimal.

Because they grew from something simple (HTML) to something very
complex (HTML+CSS),the current table rendering models…used by web browsers are insane (in the sense they are
buggy,not interoperable and not CSSish at all). Many usual CSS
assumptions are broken,and renderings diverge widely.

(加重)

目前草案中有更多的信息，但CSS工作组承认：(1)浏览器实现不一致，(2)甚至自己目前的提案也不足。

原文地址：https://www.jb51.cc/html/233110.html

html – 折叠边框模型在网络浏览器中的实现是否有效？

解决方法

相关推荐