折叠边框模型在Web浏览器中的实现是否有效?

use*_*860 18 html css css-tables

我一直试图从CSS 2.2规范中理解这段摘录一段时间没有成功(大胆的选择是我的):

UA必须通过检查表格第一行中的第一个和最后一个单元格来计算表格的初始左右边框宽度.表格的左边框宽度是第一个单元格折叠左边框的一半,表格的右边框宽度是最后一个单元格折叠右边框的一半.如果后续行具有较大的折叠左右边框,则任何多余的溢出都会溢出到表格的边缘区域.

通过检查使用表的顶部边框折叠其顶部边框的所有单元格来计算表格的顶部边框宽度.表格的顶部边框宽度等于最大折叠顶部边框的一半.

这就是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;
}
Run Code Online (Sandbox Code Playgroud)

在Web浏览器中实现折叠边框模型

虽然我期待这样的事情:

预期的结果

我期待桌子的左边缘厚14 px.因为第一个单元格的折叠左边框宽度#cell_1_1为28px(表格的左边框宽度是第一个单元格折叠左边框的一半),而左侧边框在单元格和表格之间分开.因此,在视觉上,该表在第一个单元附近具有28px边界,但是14px属于第一个单元的边界.然后表格的左侧边框保持不变.如果某个单元格的边界较宽,则它们向左突出,而不会影响表格的左边界.

顶部边框也是如此.

此外,我认为问题可能与摘录中的初始单词有关,即这些规则仅适用于表没有指定边框,但结果是不相关的(删除表的边框样式规则)根本就删除了绿色边框).

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

  • 在Chrome,FF,IE中这种折叠边框模型的实现是否正确?

  • 如果它们是正确的,我对规范的理解有什么问题?


现在,如果我们反之亦然并假设Chrome中的实现作为推导规范的起点,那么这部分应该是下一个(我只保留了与左边界相关的部分以简洁):

UA必须计算表格的初始左右边界宽度,然后通过检查表格第一行中的第一个和最后一个单元格,将其用于相对于其包含块定位表格.在所有边界冲突(如果已解决)之后,表格的左边框宽度是第一个单元格折叠左边框的一半

...

如果后续行具有较大的折叠左右边框,则任何多余的溢出都会溢出到表格的边缘区域.

...

在确定表是否溢出某个祖先时(参见"溢出"),会考虑溢出到边距中的任何边界,但不会影响表相对于其包含块的位置

然后摘录会有意义.

这里有一个表格,边框宽于第一个单元格的内部,在一个包含块的粉红色背景中(我们可以看到,表格的边框是在第一个单元格的边框上选择的,因为它更宽,然后是这个边框用于将表放置在容器内.后续单元格的较宽边框突出于表的边界之外):

chrome中的当前实现,表的边框比第一个单元格的边框宽

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

Chrome中的当前实现,表的边界比第一个单元格的边界窄

den*_*mch 5

答案是不." 我喜欢CSSWG讨论的坦率,CSS Tables 3编辑草案当前草案的注释告诉你关于这个问题你需要知道的所有内容.

由于浏览器处理方式如此不同,如果没有重新实现,就不会发生收敛....

...某些组合不是很好的问题,因此没有渲染算法可能是最佳的.

因为他们从简单的东西(HTML)的东西很复杂(HTML + CSS)的增长,当前的表呈现模型......通过Web浏览器使用的是疯狂的(在这个意义上,他们是越野车,不能互操作,而不是CSSish在所有).许多常见的CSS假设被打破,渲染图也大相径庭.

(重点补充.)

当前草案中有更多信息,但CSS工作组承认(1)浏览器实施不一致,(2)甚至他们自己当前的提案也不够.

  • 看起来他们最近复活了表3规范.最后我检查了最后一次ED是在2014年2月,该文件被放弃了一年多.甚至有一个巨大的过时通知.(对于其他人来说,这可以说明CSS表格有多糟糕.) (2认同)