只有在Safari中悬停后，垂直对齐的文本才不会立即正确格式化。

Question

我使用jQuery将元素添加到HTML中，如下所示：

​

var tr = '<tr class="row">' +
    '<td><p class="vertical-text">hello</p></td>' +
    '<td><img src="https://dummyimage.com/200" /></td>' +
    '</tr>';

$('#tableX').append(tr);

.vertical-text {
    padding-right: 5px;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

#tableX tr.row:hover {
    border: 1px solid grey;
}

table {
    display: block;
    width: 100%;
    border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableX" align="center">
    <tr>
        <th>Name</th>
        <th>image</th>
    </tr>
</table>

​

当打开HTML文件时，垂直文本不能立即正确地对齐，但是当在行中悬停时，它会改变它的样式。

当省略#tableX tr.row:hover规则时，效果很好！

下面是一个扩展的示例：https://jsfiddle.net/2cdpf28s/2/

编辑

我发现这只是Safari中的一个bug，它只在使用:hover时才会发生，有什么想法吗？

Answer 1

这个片段有两个问题。这里有一个不必要的引语"在td这里'<tr> <td">。

其次，在本例中，需要向选择器添加一个#，以引用DOM元素的ID (tableX in $('tableX').append(tr);)。

​

var tr = '<tr> <td><p class="vertical-text">' + "test" + '</p></td> </tr>';
$('#tableX').append(tr);

.vertical-text {
  padding-right: 5px;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tableX' align="center">
  <tr>
    <th>Name</th>
  </tr>
</table>

​