看看这个 fiddle ,他将在 safari 和 chrome 上工作不同:
https://jsfiddle.net/sew120xt/1/
期望的外观( Chrome ):
/image/q9ABs.png
错误的外观(safari):
/image/Sc6YF.png
似乎 Safari 会将 TR 的样式视为他 child 的样式,是否有解决办法?
最佳答案
你似乎是正确的,这是一个错误。它不仅仅是元素 <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>
关于css - 具有背景大小错误 Safari 的表 TR,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54432521/