html - Safari 9.1.3 边框宽度问题

Question

所以我不确定发生了什么，但在 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;
}

截图

密码本

Try this in Safari 9.3.1

如果我将字体大小更改为 11 或 13 像素，我可以让它工作，但我希望它是 12，如果我删除转换，我可以让它工作，但我不确定在没有它的情况下将绝对定位元素居中的简单方法。

Answer 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>