Question

看看这个小提琴，他在野生动物园和Chrome上的工作会有所不同：

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

所需外观（镀铬）：

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

坚固的外观（野生动物园）

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

似乎Safari会将TR的样式视为其子代的样式，这是否有解决方法？

Answer 1

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

如果您能够更改display的{{1}}属性而不影响布局/设计，它将对其进行修复。尝试其他一些display properties，看看是否有任何效果。

tr { }

.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;
}

表TR与背景大小的错误Safari

1 个答案: