javascript - 只有在 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 中的一个错误，它只会在使用 :hover 时发生，有什么想法吗？

Answer 1

这段代码有两个问题。有一个不需要的报价"在 td 此处 '<tr> <td"> .

其次你需要添加一个#在这种情况下，选择器引用 DOM 元素的 ID(tableX 中的 $('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>