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;
}

截图

Codepen

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>