折叠边框模型在网络浏览器中的实现是否有效?
Is the collapsing border model's implementation in web browsers valid?
我一直试图从 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;
}
虽然我期待这样的事情:
我原以为 table 的左边框是 14 像素厚。因为第一个单元格 #cell_1_1
的折叠左边框宽度为 28px(table 的左边框宽度是第一个单元格折叠左边框的一半)并且在左侧,边框在单元格和 table 之间分开。所以在视觉上 table 在第一个单元格附近有 28 px 的边框,但是 14 px 属于第一个单元格的边框。然后 table 的所有左侧的边框都保持不变。如果某些单元格的边框更宽,则它们会向左突出,而不会影响 table.
的左边框
与上边框相同。
我还认为问题可能与摘录中的 初始 单词有关,即这些规则仅适用于 table 没有指定边框的情况,但事实证明这是不相关的(删除 table 的边框样式规则只是完全删除了绿色边框)。
谁能回答下一个问题:
这个折叠边界模型在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
那么摘录就有意义了。
这里有一个 table 的边框比粉红色背景的包含块内的第一个单元格的边框宽(正如我们所见, table 的边框选择在第一个单元格的边框,因为它更宽,然后此边框用于将 table 定位在容器内。后续单元格的较宽边框突出到 table 的边框之外):
这里有相同的 table,第一个单元格的边框比 table 的边框宽,这是在边界冲突解决期间选择的。此处此边框用于相对于容器定位 table:
答案是 "no." 我喜欢 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) 甚至他们自己的当前提案也不充分。
我一直试图从 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;
}
虽然我期待这样的事情:
我原以为 table 的左边框是 14 像素厚。因为第一个单元格 #cell_1_1
的折叠左边框宽度为 28px(table 的左边框宽度是第一个单元格折叠左边框的一半)并且在左侧,边框在单元格和 table 之间分开。所以在视觉上 table 在第一个单元格附近有 28 px 的边框,但是 14 px 属于第一个单元格的边框。然后 table 的所有左侧的边框都保持不变。如果某些单元格的边框更宽,则它们会向左突出,而不会影响 table.
与上边框相同。
我还认为问题可能与摘录中的 初始 单词有关,即这些规则仅适用于 table 没有指定边框的情况,但事实证明这是不相关的(删除 table 的边框样式规则只是完全删除了绿色边框)。
谁能回答下一个问题:
这个折叠边界模型在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
那么摘录就有意义了。
这里有一个 table 的边框比粉红色背景的包含块内的第一个单元格的边框宽(正如我们所见, table 的边框选择在第一个单元格的边框,因为它更宽,然后此边框用于将 table 定位在容器内。后续单元格的较宽边框突出到 table 的边框之外):
这里有相同的 table,第一个单元格的边框比 table 的边框宽,这是在边界冲突解决期间选择的。此处此边框用于相对于容器定位 table:
答案是 "no." 我喜欢 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) 甚至他们自己的当前提案也不充分。