解决Safari表colspan /写入模式宽度错误

Question

我希望桌子上有一个第一个细胞，它可以分散几个细胞，下面的细胞可以有垂直文本，如下例所示。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在除Safari之外的每个浏览器中，这会生成包含侧面文本的正确大小的单元格。 Safari要么折叠它们（如果容器是块），要么将它们展开，就像它们是水平的一样（如果容器是内联的）。

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

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

Answer 1

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

首先，我检查userAgent，如果Firefox设置显示为inline-block div和a。否则只需使用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