css – 围绕Safari表colspan /写入模式的宽度错误

我想要一个桌子有一个第一个单元格,可以堆叠几个单元格,下面的单元格具有垂直的文本,如下例所示.

.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.实际使用情况比较复杂,所以简单地将固定宽度设置在某处不是一个可行的解决方案.

我尝试将表作为显示：flex和nesting列重新实现行方向flex,但遇到同样的错误,这次在Firefox中也是如此.

解决方法

使用jQuery简单的修复(你可以使用纯js,如果你想,我想你也可以使用css(sass / less),但这是我的解决方案.

首先我检查一下userAgent,如果是将Firefox设置为div和a的内嵌块.否则只是使用flex.

对于每个td div和td,获取子div或宽度并分配给父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>

看起来像垂直-r1不是很好地支持… hummmmm尽量避免它现在我猜

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

原文地址：https://www.jb51.cc/css/214666.html