解决 Safari 表格 colspan/writing-mode 宽度错误

Posted 2023-03-06

【中文标题】解决 Safari 表格 colspan/writing-mode 宽度错误

【英文标题】：Work around Safari table colspan/writing-mode width bug

【发布时间】：2017-06-29 15:10:39

【问题描述】：

我想要一个表格有一个第一个单元格，该单元格跨多个单元格，下面的单元格有垂直文本，如下例所示。

.second td * 
  writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;

<table border=1><tr>
<td colspan=4>This cell has colspan=4</td>
</tr><tr class="second">
<td><div>Writing-mode:vertical-rl inside block</div></td>
<td><div>Writing-mode:vertical-rl inside block</div></td>
<td><div>Writing-mode:vertical-rl inside block</div></td>
<td><div>Writing-mode:vertical-rl inside block</div></td>
</tr></table>

<table border=1><tr>
<td colspan=4>This cell has colspan=4</td>
</tr><tr class="second">
<td><a>Writing-mode:vertical-rl inside inline</a></td>
<td><a>Writing-mode:vertical-rl inside inline</a></td>
<td><a>Writing-mode:vertical-rl inside inline</a></td>
<td><a>Writing-mode:vertical-rl inside inline</a></td>
</tr></table>

在除 Safari 之外的所有浏览器中，这都会生成包含横向文本的适当大小的单元格。 Safari 要么折叠它们（如果容器是块状的），要么像水平的一样展开它们（如果容器是内联的）。

我已经提交了bug to Webkit，但在那之前，我想使用这种模式，所以我正在寻找一种方法来解决它，以保留大部分这种结构以及在垂直文本上方使用 colspan 的能力.实际用例更复杂，因此简单地在某处设置固定宽度并不是一个可行的解决方案。

我尝试将表格重新实现为 display: flex 并在行方向 flex 中嵌套列，但遇到了同样的错误，这一次在 Firefox 中也是如此。

【问题讨论】：

即使您的默认示例在 Chrome 和 Firefox 中看起来也不一样。

他们都正确渲染它。我对到处看起来都一样的东西不感兴趣。我有兴趣解决主要的、停止显示的渲染错误。

【参考方案1】：

使用 jQuery 进行简单修复（如果需要，您可以使用纯 js，我认为您也可以使用 css（sass/less）进行修复，但这是我的解决方案。

首先我检查 userAgent，如果是 Firefox，则将 div 和 a 的显示设置为 inline-block。否则只需使用 flex。

对于每个td div 和td a 获取子div 或a 宽度并分配给父td 的宽度

var display = 'flex';

if (navigator.userAgent.search("Firefox") > -1) 
  display = 'inline-block';


$("td div, td a").each(function() 
  self = $(this);
  self.css('display', display);
  self.closest('td').width(self.width());
);

.second td * 
  writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  background: red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border=1>
  <tr>
    <td colspan=4>This cell has colspan=4</td>
  </tr>
  <tr class="second">
    <td>
      <div>Writing-mode:vertical-rl inside block</div>
    </td>
    <td>
      <div>Writing-mode:vertical-rl inside block</div>
    </td>
    <td>
      <div>Writing-mode:vertical-rl inside block</div>
    </td>
    <td>
      <div>Writing-mode:vertical-rl inside block</div>
    </td>
  </tr>
</table>

<table border=1>
  <tr>
    <td colspan=4>This cell has colspan=4</td>
  </tr>
  <tr class="second">
    <td id="thistd"><a id="this">Writing-mode:vertical-rl inside inline</a></td>
    <td><a>Writing-mode:vertical-rl inside inline</a></td>
    <td><a>Writing-mode:vertical-rl inside inline</a></td>
    <td><a>Writing-mode:vertical-rl inside inline</a></td>
  </tr>
</table>

好像vertical-rl 的支持不是很好...嗯嗯嗯，我想现在尽量避免它

https://www.w3.org/International/tests/repo/results/writing-mode-vertical