overflow-x 不适用于 firefox；在 Chrome/edge 工作

Question

我正在尝试在 table 单元格中做点前导。我已经在 Chrome 和 Edge 上运行了，但是 Firefox 没有正确截断领导者。这是显示问题的简化版本。在 Chrome/Edge 上，我正确地看到了 1928......|1,109|，而在 Firefox 上，这些点一直在下一个 table 单元格上并结束。 (Firefox 50.1.0; Chrome 55.0.2883.87) 这是基于示例 https://www.w3.org/Style/Examples/007/leaders.en.html

<html>
  <head>
    <style type="text/css">
        td.leader-dots {
          max-width:40em;
          overflow-x:hidden;
          background:green;
        }
        td.leader-dots::after {
          float:left;
          width:0;
          white-space:nowrap;
          content: "..........................................................";
          background:red;
        }
        td.leader-dots span {
          background:yellow;
        }

        .tab1c1 { border-right: 1px solid black; }
        .tab1c2 { border-right: 1px solid black; }
    </style>
  </head>
  <body>   

    <table>
    <colgroup>
    <col span='1' style='width: 7em;'/>
    <col span='1' style='width: 0em;'/>
    </colgroup>
    <tr>
        <td class='tab1c1 leader-dots'><span>1928</span></td>
        <td class='tab1c2'>1,109</td>
    </tr>
    </table>

  </body>
</html>

Answer 1

将 td.leader-dots 更改为 display: block;（::after 上的 float 成功了）：

td.leader-dots {
  max-width: 40em;
  overflow-x: hidden;
  display: block;
  background: green;
}
td.leader-dots::after {
  float: left;
  width: 0;
  white-space: nowrap;
  content: "..........................................................";
  background: red;
}
td.leader-dots span {
  background: yellow;
}
.tab1c1 {
  border-right: 1px solid black;
}
.tab1c2 {
  border-right: 1px solid black;
}

<table>
  <colgroup>
    <col span='1' style='width: 7em;' />
    <col span='1' style='width: 0em;' />
  </colgroup>
  <tr>
    <td class='tab1c1 leader-dots'><span>1928</span>
    </td>
    <td class='tab1c2'>1,109</td>
  </tr>
</table>

在最新的 firefox 中测试：

Answer 2

将td.leader-dots中的overflow-x:hidden;改为overflow:hidden;，就像你提供的例子。

当我测试它时，它可以在 Firefox、Chrome 和 MS Edge 上运行。

overflow-x 不适用于 firefox；在 Chrome/edge 工作

overflow-x not working on firefox; works on Chrome/edge

css

firefox

overflow