当边框折叠且tbody、row或cell相对定位时，单元格的背景将绘制在边框上
类别
（核心：：布局：表格，缺陷，P3）
跟踪
( )
人
（记者：bzbarsky，未指派）
工具书类
（块1打开错误）
细节
附件
（4个文件）
|
||
|
||
见随附的测试用例，它是自我描述的。
|
||
|
||
与Windows 8上的Firefox 16相同
我知道您的测试用例很好地显示了这个问题，但您似乎缺少一些标记，如</tr>。 我创建了另一个测试用例来描述这个问题，如果使用旧的cellpadding/cellspacing Firefox正确地呈现表边框，那么只有在使用css border-collapse时才会出现。 奇怪：/ 这在Ubuntu 12.04的Firefox 16.0.2中出现。
|
||
|
||
Linux上的26也是如此。 有人能把平台改成“所有平台”吗？ 这个错误变得荒唐而被忽视了。 它影响了许多允许拖放重新排序的数据网格UI。
赛斯可能会感兴趣。 我认为这可能是根据 错误35168注释38 。虽然修复此问题实际上可能要简单得多：我怀疑可以通过从nsTableRowFrame和nsTableRow GroupFrame中删除对行或行组调用TableBackgroundPainter的代码，并删除nsTablePainter中的IsPseudoStackingContextFromStyle（）检查来修复。 这将与CSS2.1相匹配……尽管我认为这也会打破内部表部分的“不透明度”。 这就是说，我认为不存在一个包含“不透明”功能的一致模型。（此外，相对定位单元格时也会出现问题——我倾向于认为，至少分隔边界模型中的边界应该随着相对定位而移动。） 另请参见 错误858333 以及中的分辨率 http://lists.w3.org/Archives/Public/www-style/2013年7月/0081.html . 当前的规范在这里可能不兼容Web，因此需要进行研究。 我也不相信现在花时间在这上面是值得的。
赛斯注意到，一旦出现偏移，Chrome和Safari就会出现相同的错误，但只会出现在内容重叠的部分。
[和赛斯一起调查] Gecko和其他引擎（至少是WebKit/Blink）之间的区别似乎在于背景覆盖的区域。 我以为规范说折叠边框模型中的单元格背景应该延伸到边框的中间（例如，虚线边框将在点的下面有两个相邻单元格的背景，在中间相遇），但我现在无法从规范中找到相关引用。
|
|
|
|
|
||
问题是，不清楚什么是正确的行为。遗憾的是，规范没有特别定义它。
|
|
|
|
|
||
不，关键是规范没有定义在这种情况下应该做什么。 请参阅此错误中的早期注释。 是的，规范没有定义它是规范的一个问题。正确的做法是修复规范，然后实现结果。
|
|
|
|
|
||
这里的规格是 http://www.w3.org/TR/CSS21/zindex.html#绘画 -订单 在这个bug的原始测试用例中，有一个堆叠上下文：根元素的堆叠上下文。 表的边界是在绘制顺序的步骤4中绘制的，因为表是根的流入式、非定位的块级后代。 注意，根据规范，背景也应该在步骤4中绘制，但是。。。 tbody本身在步骤8中绘制，因为它已定位。 问题是“以非默认z顺序绘制tbody”代码也会绘制背景。 而真正的问题是，如果单元格是rel-pos并且偏移量不为零，应该怎么办。 它的文本应该移动，而不是背景吗？ 如果单元格未定位，背景是否应该移动，但保持绘制在相同的z顺序？ 还有什么？ 对于相对定位的事物，通过在步骤8中用元素原子化地绘制它们的背景，通常可以避免所有这些问题。。。 您可能想与这个简单的非表测试用例进行比较： <div style=“background:yellow；height:200px；margin-bottom:-50px”></div> <div style=“border:5px纯黑；height:100px”></div> 到这个： <div style=“background:yellow；position:relative；height:200px；margin-bottom:-50px”></div> <div style=“border:5px纯黑；height:100px”></div> 这清楚地说明了position:relative如何影响z排序。
谢谢你的回答，现在对我来说很有意义。 我仍然希望在规范不明确的情况下（位置：相对偏移和零偏移），浏览器能以“最不令人惊讶”的方式解释它。 这与webkit和trident相同。 也就是说，考虑到目前规范的模糊性，我可以看出这种更改是不值得的。
（回答“现在不做评论” 评论#18 ) >tbody本身在步骤8中绘制，因为它已定位。 以及 >问题是“以非默认的z顺序绘制tbody”代码会绘制 >背景也是如此。 根据引用的规范，我认为这显然是一个错误； 它应该在步骤4中绘制，而不是在步骤8中，因为步骤8中没有任何内容会导致在tbodies上绘制背景。 >真正的问题是，如果单元格是rel-pos，并且 >非零偏移。 它的文本应该移动，而不是背景吗？ 如果 >背景移动，但保持在相同的z顺序绘制 >牢房没有定位？ 还有什么？ 是的，这部分还没有定义，但我认为它也与这个bug（我们已经解决了这个bug）完全分开了 错误35168 --我认为我们找到了合理的解决方案）。 它在中也是*显式*未定义的 http://dev.w3.org/csswg/css2/visuren.html#propdef -位置 ，如果。
不管规范怎么说，我觉得当前的行为是非正统的。 对于“边界崩溃：崩溃”，边界消失了。 对于“边界塌陷：分离”，将显示边界（但已分离）。 HTML中没有任何其他地方会向元素添加背景使其边界消失，我认为边界崩溃当然不应该隐藏边界。 在Chrome中，它的工作方式与我作为一个没有阅读过规范的开发人员所期望的一样。我只需在我的<td>上应用一个边框和背景，边框和背景都是可见的。
回想一下90年代末和2000年代初的糟糕时光。非标准渲染行为的问题不在于它们是非标准的，而是因为它们在不同方面是非标准化的。 这就是为什么开发商的生活如此悲惨。 对我来说，这是标准化的最大动力和好处。 现在，FF是唯一一款行为与其他浏览器不同的浏览器，无论实际的规范是什么，这都违背了普通开发人员的标准化精神。 考虑到这个问题没有简单的解决方法，我的观点是优先级确实应该更高。
看起来一个简单的解决方法是将“background-clip:padding-box”属性添加到单元格： td（时域）{ 位置：相对； 背景剪辑：填充框； } 它在我的具体案例中起作用。 资料来源： http://stackoverflow.com/a/16337203/1097926
我们在这种行为上也遇到了问题。 通常，我们的站点具有在表格单元格中发生此问题的所有先决条件： -“边界崩塌：崩溃` -已定义的边界 -背景色（通常在标题单元格（th）上） 一旦这些规则到位，例如，如果您使用像Ember Light Table这样的库，它将应用“position:relative；” 默认设置为“th”，甚至出于任何其他原因手动应用，表单元格边界都会神奇地消失，但只有在Firefox中。 我花了一段时间才找到这个帖子，可能是谷歌的坏报应，但我真的是疯了。 fwiw，`background-clip:填充框；` 也为我们解决了这个问题（这似乎合乎逻辑-背景没有延伸到边界），尽管对表行（tr）而不是单个单元格应用背景颜色也是如此-一旦从th和td中删除了“背景颜色”规则，边界就会显示良好。
@joelkinzel-检查后发现，如果上面的规则（位置、边框、bgcolor）设置在表行上而不是单元格上，那么表行边框就会像单元格边框一样消失。 但是，与单元格边框不同，对行应用背景滑块不会导致表行边框重新出现。 下面是我制作的代码笔，用于演示我理解的问题： http://codepen.io/treecleartones/pen/ObaeRQ
不确定这是否是相同的错误，但当我浏览[1]*时，一些*表（并非全部）的边界有问题。 甚至有一些表格显示了某些单元格的边框，但没有显示其他单元格的边框。 请注意，所有这些表都遵循相同的CSS规则。 在Windows上使用Firefox 51.0.1进行测试。 [1] https://fa.wikipedia.org/wiki/%D9%88%DB%8C%DA%A9%DB%8C%E2%8C%D9%BE%D8%AF%DB%8C%D8%A7:%DA%AF%D8%B2%D8%A7%D8%B1%D8%B4_%D8%AF%DB%8C%D8%D8%AA%A8%D8%A7%D8%B3
哇，这实际上是一个6年前的老虫子。 我就走了，然后举例 https://jsfiddle.net/hyr9vuyj/2/ https://jsfiddle.net/hyr9vuyj/3/ 至于为什么我需要这样布局我的表，它是为了在表单元格中放置绝对位置的元素，如图标等。
我发现的另一件事是，当您使用@threecleartons示例，但使用多个tbody时，当您在某处添加一个空的<tbody></tbody>时，它将停止工作，请参阅 http://codepen.io/mmolhoek/pen/PpyvoM 例如
我对表头第th个元素的边框（而不是表tbody中单元格的边框）有一个问题，但问题是一样的——当th个元素有背景属性集时，相邻的th元素的边框和这些相同元素的下边框不会出现。 请参见： https://jsfiddle.net/sbwmikael/45Lpde3w/6/ 或者，作为图片，第一个是Firefox 52.0.2，第二个是Google Chrome： https://pictr.com/images/2017/04/11/xDhzn.jpg https://pictr.com/images/2017/04/11/xDnAB.jpg（英文）
|
||
|
|
|
||
|
|
||
|
|
|
||
|
||
|
|
||
|
|
||
|
Bug仍然可以在Mac上的Firefox 81.0.1中重现。 我个人使用background-clip:padding-box； 来解决这个问题，但我认为它仍然是一个错误。
https://codepen.io/GeoffreyCrofte/pen/WNxMBXg
