FireFox 中的表格渲染不正确

Posted 2023-03-06

【中文标题】FireFox 中的表格渲染不正确

【英文标题】：incorrect table rendering in FireFox

【发布时间】：2019-10-16 07:43:42

【问题描述】：

当页面刷新时，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>

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

这就是它的样子：

【问题讨论】：

$line-spacing : 变量值为 ?

哦，我的错。值为20px。

第一次加载页面时出现.cv-table border-spacing: 0 $line-spacing; 的问题，检查它删除它然后再次添加它在fire fox中工作

对，一旦我更改了 CSS 元素，它就可以工作，但我希望它从头开始工作。

【参考方案1】：

给td一些宽度和高度

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

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

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

【讨论】：

行得通，但它是硬编码的，如果我更改填充/边框间距，它会中断......

您使用的是 sass 对吗？使用变量并在技术上处理它

如果没有更好的答案，我会接受它，因为它确实可以在测试后工作。

更改填充/间距没有问题，我也更改了这些值

如你所愿@TomášSláma