为什么 Chrome 中的表格处理文本溢出的方式与 Firefox 中的不同？

Question

我在 Chrome 和 Firefox 中运行相同的 Anuglar (mat-table) html。Chrome 有一个滚动条来滚动表格单元格，而 Firefox 则重叠文本

    <td
      style="
        min-width: 160px;
        max-width: 400px;
        text-overflow: clip;
        overflow: hidden;
        overflow-x: scroll;
        white-space: nowrap;
      "
      mat-cell
      *matCellDef="let element"
    >

铬合金：

火狐浏览器

Answer 1

（多次编辑）我可以确认这是一个错误，我找到了一个相关链接来描述尚未解决的问题，尽管我最初怀疑这可能是两个浏览器引擎之间对 CSS 标准的不同解释：

https://bugzilla.mozilla.org/show_bug.cgi?id=221154

然而，问题的解决方案是在表格单元格内div插入一个元素并将其限制为特定的元素以获得您期望的结果。max-width

td div {
  max-width:400px;
  white-space:nowrap;
  overflow-x:scroll;
}

这是一个带有工作小提琴的示例 - 如果您使用 Firefox 打开示例小提琴，则您所描述的问题会清楚地反映在示例小提琴中，而在 Chrome 上它的工作方式有所不同。

https://jsfiddle.net/4r01otfk/1/