当包装器的溢出-x为自动时,FF左表边框消失

Posted

技术标签:

【中文标题】当包装器的溢出-x为自动时,FF左表边框消失【英文标题】:FF left table border disappears when wrapper's overflow-x is auto 【发布时间】:2018-04-24 00:55:18 【问题描述】:

当使用带有边框的单元格的表格时,在 FireFox 中,当表格放置在带有 overflow-x: auto 的包装器中时,左侧表格边框会消失。

<div style="overflow-x:auto">
  <table style="border-collapse:collapse">
    <tr>
      <td style="border: none;"></td>
    </tr>
    <tr>
      <td style="border: 1px solid black;">a</td>
    </tr>
  </table>
</div>

(也是here)

A possible workaround I found:

<div style="overflow-x:auto; padding-left: 1px">
  <table style="border-collapse:collapse">
    <tr>
      <td style="border: none;"></td>
    </tr>
    <tr>
      <td style="border: 1px solid black;">a</td>
    </tr>
  </table>
</div>

这确实发生在从 4(可能更早)到 56 的每个 FireFox 版本上。这种行为似乎完全特定于 FF,因为我无法在任何版本的 IE、Opera、Safari、android 浏览器中重现它或 Chrome(甚至 IE9 也符合此处!)。我找不到 any bug report 直接提到这种情况(只有在 6 年后仍然打开的表格渲染错误 [尽管 chuckles] 是 #688556,但它涉及背景绘制,这显然不是本例)。

这是我应该报告的错误,还是我在这里遗漏了一些重要的 html5 规范,这是一种预期的行为?

【问题讨论】:

报告为新错误 【参考方案1】:

由于我认为这不是预期行为,因此我将其提交为 https://bugzilla.mozilla.org/show_bug.cgi?id=1416504 。同样,最简单的解决方法是提供宽度等于 int( 0.5 * ( left_border_width + 1 ) ) 的左侧填充。

【讨论】:

以上是关于当包装器的溢出-x为自动时,FF左表边框消失的主要内容,如果未能解决你的问题,请参考以下文章

具有“溢出:隐藏”溢出祖父母边距的 Flexbox 子项

Facebook SDK 包装器的自动化测试

为 Javascript API 创建飞镖包装器的好方法是啥?

具有固定包装器的引导网格 - 防止列堆叠

由于边框半径为 50% 的包装元素上的背景颜色而显示锯齿状“边框”;

如何定义协议以包含带有 @Published 属性包装器的属性