css - 具有背景大小错误 Safari 的表 TR

Question

看看这个 fiddle ，他将在 safari 和 chrome 上工作不同:

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

期望的外观( Chrome ):

/image/q9ABs.png

错误的外观(safari):

/image/Sc6YF.png

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

Answer 1

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

如果您能够更改 display tr { }的属性(property)在不影响您的布局/设计的情况下，它将修复它。尝试其他几个 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>