首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >折叠边框模型在web浏览器中的实现是否有效?

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

Stack Overflow用户
提问于 2016-02-05 00:15:52
回答 1查看 338关注 0票数 18

一段时间以来,我一直在尝试从CSS2.2规范中理解this excerpt,但没有成功(粗体选择是我的):

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

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

这就是如何在Chrome中实现边框、折叠等(FF和IE >7是相同的):

代码语言:javascript
复制
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宽(,表的左边框宽度是第一个单元格折叠左边框的一半),并且在左侧,边框在单元格和表之间拆分。所以从视觉上看,表格在第一个单元格附近有28px的边框,但14px属于第一个单元格的边框。然后,表的所有左侧的边框都保持不变。如果某些单元格的边框变宽,则它们会向左突出,而不会影响表格的左边框。

顶端边框也是如此。

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

那么谁能回答下面的问题:

  • 这个折叠边框模型在Chrome,FF,IE中的实现是否正确?
  • 如果他们是正确的,我对specification?

的理解有什么问题

现在,如果我们反其道而行之,并假设在Chrome中的实现作为派生规范的起点,那么这个部分的应该类似于下一个(为了简洁起见,我只保留了与左边框相关的部分):

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

..。

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

..。

在确定表是否溢出某些祖先块(请参阅“”)时,会考虑溢出到页边距的任何边框,但不会影响表相对于其包含的块的位置

那么摘录就有意义了。

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

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-02-18 15:54:48

答案是“不”。我喜欢CSSWG的坦率讨论,current draft of the CSS Tables 3 editors' draft上的笔记告诉了你关于这个问题需要知道的所有事情。

由于浏览器对此的处理方式截然不同,因此如果不重新实现,收敛就不会发生。…

…有些组合不是适定的问题,因此没有任何渲染算法是最优的。

因为它们从简单的东西(HTML)发展到非常复杂的东西(HTML+CSS),所以当前的表格呈现模型…被web浏览器使用的是疯狂的(从某种意义上说,它们有buggy,不能互操作,而且根本不是CSSish )。许多常见的CSS假设都被打破了,渲染结果差异很大。

(重点已添加。)

在当前的草案中有更多的信息,但是CSS工作组承认(1)浏览器的实现是不一致的,(2)即使是他们自己目前的提案也是不够的。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35206085

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档