FireFox 中的表格渲染不正确

Question

当页面刷新时，A table 的格式会被破坏，但在调整大小时可以正常工作。

我尝试在 Chrome、IE 和 Edge 中运行相同的代码，没有任何此类问题。

处理表格格式的SASS 如下sn-p：

.cv-table {
  border-collapse: separate;
  border-spacing: 0 $line-spacing;
}

.cv-section-cell {
  text-align: center;
  vertical-align: middle;

  border-right: thin solid #000;
  padding: $line-spacing / 2;

  margin: 0;

  span {
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
  }
}

表格本身如下所示：

<table class="cv-table">
  <tr>
    <td rowspan="2" class="cv-section-cell">
      <span>
        Experience
      </span>
    </td>
    <td class="cv-section-cell">
      <span>
        2016/2017
      </span>
    </td>
    <td class="cv-content-cell">
      Some other text.
    </td>
  </tr>
  <tr>
    <td class="cv-section-cell">
      <span>
        2017/2018
      </span>
    </td>
    <td class="cv-content-cell">
      Some text.
    </td>
  </tr>
</table>

这是页面在重新加载之前的样子：

这就是它的样子：

Answer 1

给td一些宽度和高度

将此CSS添加到您的课程中可能对您有用

 .cv-section-cell {
          width: 1.5em;
          height: 1.5em;
       }

在 Firefox 中打开这个小提琴 https://jsfiddle.net/fwz7k20q/4/