html - FireFox 中的表格呈现不正确

Question

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

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

处理表格格式的 SASS 是以下片段:

.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 中打开这个 fiddle https://jsfiddle.net/fwz7k20q/4/