выравнивание текста: центр + межстрочный интервал не работает в Safari - PullRequest
Новая
       4

выравнивание текста: центр + межстрочный интервал не работает в Safari

2 голосов
/ 19 февраля 2020

У меня есть два элемента слов, которые должны быть в одной строке и разделены символом / изображением ТОЛЬКО, когда они находятся в одной строке. Текст должен быть по центру.

Мое текущее решение работает во всех браузерах, кроме Safari, потому что Safari не правильно центрирует текст, если есть набор межсловных интервалов.

Пример проблемы: https://jsfiddle.net/k275f1ph/

HTML: 

<ul class="test">
  <li><span>Longer Word 1</span></li>
  <li><span>Word 2</span></li>
</ul>
<br/>
<ul>
  <li><span>Longer Word 1</span></li>
  <li><span>Word 2</span></li>
</ul>

CSS: 

ul {
  display: block;
  width: 120px;
  border: 1px solid black;
  margin: 0;
  padding: 0;
  text-align: center;
  word-spacing: 10px;
}

ul.test {
  width: 300px;
}

li {
  display: inline;
  word-spacing: 0;
  position: relative;
  &:not(:last-child):after {
    content: " ";
    position: relative;
    background-image: url("https://static01.20min.ch/dyim/5dd8a8/T470,230/images/content/2/7/1/27109470/10/teaserbreit.jpg");
    width: 6px;
    height: 6px;
    word-spacing: 20px;
  }
}

span {
  display: inline-block;
}

Как видите, текст не центрируется на верхнем элементе только в Safari.

Как решить эту проблему?

...