Таблица TR с ошибкой фонового размера Safari - PullRequest
Новая
       43

Таблица TR с ошибкой фонового размера Safari

0 голосов
/ 30 января 2019

Посмотрите на эту скрипку, он будет работать по-разному в сафари и хроме: 

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

Желаемый вид (хром): 

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

Жучий вид (сафари): 

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

Похоже, что Safari вместо этого будет рассматривать стиль TR как стиль для своих детей, есть ли какое-то решение для этого?

1 Ответ

0 голосов
/ 30 января 2019

Вы правы, что это ошибка.Это не просто элемент <tr>, а любой элемент, отображаемый как table-row в отображаемом элементе table.Я повторил проблему во фрагменте ниже, используя элементы не из таблицы, изменив свойство display каждого из них.(будет отображаться неправильно только в Safari).

Если вы можете изменить display свойство 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;
}
<div class="tbody">
  <div class="tr">
    <span>aaaaaaaaaaaa</span>
    <span>bbbbbbbbbbbb</span>
    <span>cccccccccccc</span>
  </div>
</div>
...