Table TR 与 background-size Safari 错误

Question

看看这个 fiddle，他在 safari 和 chrome 上的工作方式会有所不同：

https://jsfiddle.net/sew120xt/1/

想要的外观（chrome）：

https://i.stack.imgur.com/q9ABs.png

错误的外观（safari）：

https://i.stack.imgur.com/Sc6YF.png

Safari 似乎会将 TR 的样式视为他孩子的样式，是否有解决办法？

Answer 1

你似乎是正确的，这是一个错误。它不仅是元素 <tr> 本身，而且是在 table 显示元素中显示为 table-row 的任何元素。我通过更改每个元素的 display 属性使用非 table 元素在下面的代码片段中复制了该问题。（只会在 Safari 中显示不正确）。

如果您能够更改 tr { } 的 display 属性而不会影响您的 layout/design，它将修复它。尝试其他一些 display properties 看看是否有效。

.tbody {
  background-color:red;
  display: table;
}
.tr {
  background-image:linear-gradient(to right, black, black);
  background-size: 50% 100%;
  background-repeat:no-repeat;
  color:white;
  display: table-row;
}
span {
  display: table-cell;
}

<div class="tbody">
  <div class="tr">
    <span>aaaaaaaaaaaa</span>
    <span>bbbbbbbbbbbb</span>
    <span>cccccccccccc</span>
  </div>
</div>

Table TR 与 background-size Safari 错误

Table TR with background-size bug Safari

css

background

background-image

css-tables

background-size