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

标签 html css css-tables

我一直在努力理解this excerpt来自 CSS 2.2 规范的一段时间没有成功(大胆的选择是我的):

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

the implementation of the collapsing borders model in web-browsers

当我期待这样的事情时:

the expected result

我希望表格的左边框厚度为 14 像素。因为第一个单元格 #cell_1_1 的折叠左边框是 28px 宽(表格的左边框宽度是第一个单元格折叠左边框的一半)并且在左边边框在单元格和表格之间分开。所以从视觉上看,表格在第一个单元格附近有 28 px 的边框,但是 14 px 属于第一个单元格的边框。然后表格左侧的边框保持不变。如果某些单元格的边框较宽,则它们会向左突出,而不会影响表格的左边框。

与上边框相同。

我还认为问题可能与摘录中的initial 字有关,即这些规则仅适用于表格没有指定边框的情况,但事实证明这无关(删除表格的边框样式规则只是简单地删除了绿色边框)。

那么任何人都可以回答下一个问题:

  • 这个折叠边框模型在 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

那么摘录就有意义了。

这里有一个表格,其边框比粉红色背景的包含 block 内的第一个单元格的边框宽(正如我们所见,表格的边框选择在第一个单元格的边框之上,因为它更宽且然后此边框用于将表格定位在容器内。后续单元格的较宽边框突出到表格边框之外):

the current implementation in chrome with table's border wider than the first cell's one

这里有同一个表格,其第一个单元格的边框比表格的边框宽,这是在边界冲突解决期间选择的。此处此边框用于相对于容器定位表格:

the current implementation in chrome with table's border narrower than the first cell's one

最佳答案

答案是否定的。我喜欢 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) 即使是他们自己当前的提案也不充分。

关于html - 折叠边框模型在网络浏览器中的实现是否有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35206085/

相关文章:

css - 显示 :table for IE7?

css - 如何在浏览器调整大小时截断 div 或单元格中的文本

安卓宽度 :100% fix (website takeover issue)

javascript - 使用 Jquery 延迟提交按钮单击

css - 中心/中间对齐元素大于容器

html - Chrome 中的导航栏定位错误

css - 树莓派 3 上的 LAMP 堆栈未加载 CSS

javascript - 将 JavaScript 添加到 w2ui 面板

javascript - 验证 Javascript 中的文本区域

html - 将表格列宽调整为内容大小