box-sizing：边框框在 Chrome/Edge Chromium 中不起作用

Question

我有一些表格（因为它们在 vue 组件中被扭曲，我不能将它们放在一个表格中），其中表格单元格需要在使用各种边框时对齐。在 Firefox 上，使用 box-sizing: border-box 效果很好，但在 Chrome 或 Edge Chromium 上相同的代码会错位。

这是我的代码：

<table>
  <tr>
    <td class="cell-th2-4"></td>
    <td class="cell-th2-4"></td>
    <td class="cell-th2-3"></td>
  </tr>
</table>
<table>
  <tr>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4 vertical_separator"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4 vertical_separator"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
  </tr>
  <tr>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4 vertical_separator"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4 vertical_separator"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
  </tr>
</table>

这是我的 CSS：

.vertical_separator {
  border-left: 2px solid;
}

.cell-th2-4 {
  min-width: 3.6em;
  text-align: center;
  box-sizing: border-box;
  border-left: 2px solid;
  border-right: 2px solid;
}

.cell-th2-3 {
  min-width: 2.7em;
  text-align: center;
  box-sizing: border-box;
  border-left: 2px solid;
  border-right: 2px solid;
}

.cell4 {
  min-width: 0.9em;
  text-align: center;
  box-sizing: border-box;
}

.cell4:first-child {
  border-left: 2px solid;
}

.cell4:last-child {
  border-right: 2px solid;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
  box-sizing: border-box;
}

td {
  padding: 0;
  border: 1px solid;
  overflow: hidden;
  box-sizing: border-box;
}

tr {
  white-space: nowrap;
  height: 1.5em;
  box-sizing: border-box;
}

这是我的JsFiddle - 如果您在 Firefox 中打开它，它会很好对齐：

我在 Chrome/Chromium Edge 中打开的列会像这样错位：

对此我能做些什么？

Answer 1

我想我明白了：问题与 border-box 无关，而是与 min-width 相关，因为大多数浏览器（仍然）似乎对表格单元格实施不佳。

查看MDN: min-width - Browser compatibility 注释。对于 Firefox（和 Opera），它说：CSS 2.1 保留了未定义表的 min-width 行为。 Firefox 支持将 min-width 应用于表格元素。。可能就像'而其他浏览器没有'。

因此您在使用 Firefox 和 Chrome/Edge 时所体验到的差异。

对我来说，这意味着您必须解决 min-width 的问题，以获得一些跨浏览器兼容性。

如果可能的话，我会说：删除顶部 <table> 并将其 <tr> 移动到底部 <table> 并使用旧的内联 colspan，规避问题...

像下面的 sn-p（确保你考虑了那里的各种 cmets！特别是 .cell4）。

在最近的 Chrome/Edge、IE11 和 Firefox、W10 上测试。

/* Use this */
table,table * { box-sizing: border-box }

/* or use this for the entire page. Common practice... */
html                 { -webkit-box-sizing: border-box; box-sizing: border-box }
*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit }

/* REMOVED all 'border-box' settings below for easier maintenance */

.vertical_separator {
  border-left: 2px solid;
}

.cell-th2-3, /* ADDED */
.cell-th2-4 {
/*  min-width: 3.6em; /* REMOVE */
  text-align: center;
  border-left: 2px solid;
  border-right: 2px solid;
}

/* REMOVE entirely
.cell-th2-3 {
  min-width: 2.7em;
  text-align: center;
  border-left: 2px solid;
  border-right: 2px solid;
}
*/

.cell4 {
  min-width: 0.9em;
  /* problematic!!! Firefox: 14.4px Chrome/Edge 15px.
     - Browser default font-size quirk?
     - Browser internal rounding of border pixels?
  */

  text-align: center;
}

.cell4:first-child {
  border-left: 2px solid;
}

.cell4:last-child {
  border-right: 2px solid;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  padding: 0;
  border: 1px solid;
  overflow: hidden;
}

tr {
  white-space: nowrap;
  height: 1.5em;
}

<table>
  <tr>
    <td class="cell-th2-4" colspan="4"></td>
    <td class="cell-th2-4" colspan="4"></td>
    <td class="cell-th2-3" colspan="3"></td>
  </tr>
  <tr>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4 vertical_separator"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4 vertical_separator"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
  </tr>
  <tr>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4 vertical_separator"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
    <td class="cell4 vertical_separator"></td>
    <td class="cell4"></td>
    <td class="cell4"></td>
  </tr>
</table>