Блог

Главная - Вопросы по программированию - Проблема с шириной границы Safari 9.1.3

Проблема с шириной границы Safari 9.1.3

#html #css #safari #webkit

#HTML #css #safari #webkit

Вопрос:

Итак, я не уверен, что происходит, но в Safari 9.1.3 ширина границы для элементов с определенной комбинацией других стилей создает неожиданные результаты. По сути, я применяю преобразование к абсолютно расположенному элементу, чтобы получить горизонтальное центрирование элемента переменной ширины.

HTML:

 <div class="border">
    <div class="border__text">
        test
    </div>
</div>

CSS

 .border {
  position: absolute;
  left: 50%;
  padding: 50px;
  border: 1px solid #666666;
  transform: translateX(-50%);
}

.border__text {
  font-size: 12px;
  font-style: italic;
  font-family: "Times New Roman", Times, serif;
}

Скриншот

Скриншот проблемы с границей в Safari 9.3.1

Codepen

Попробуйте это в Safari 9.3.1

Я могу заставить его работать, если я изменю размер шрифта на 11 или 13 пикселей, но я бы хотел, чтобы он был 12, и я могу заставить его работать, если я удалю преобразование, но я не уверен в простом способе центрировать абсолютно позиционированный элемент без него.

Комментарии:

1. Поскольку причиной является преобразование, зачем вам нужно использовать его для центрирования div?

2. @LGSon я центрирую его по горизонтали. Преобразование необходимо для корректировки положения после position: absolute; и left: 50%;

3. Если вам понравится это, ваши проблемы исчезнут: codepen.io/anon/pen/VKARVL

4. Мой ответ решил ваш вопрос?

Ответ №1:

Не используйте transform , делайте так

 .border {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

.border__text {
  display: inline-block;
  font-size: 12px;
  padding: 10px 50px;
  border: 1px solid #666666;
}  
 <div class='border'>
  <div class='border__text'>test</div>
</div>