Safari 9.1.3边框宽度问题

所以我不确定发生了什么，但在Safari 9.1.3中，具有其他样式特定组合的元素上的边框宽度会产生意想不到的结果。基本上，我正在对绝对定位的元素应用变换以获得水平居中的可变宽度元素。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，我可以得到它，如果我删除工作这个转换，但我不确定一个简单的方法来将一个绝对定位的元素置于没有它的位置。

来源

2016-10-04 mdelrossi1

为理由被变换，为什么你需要用它来居中DIV？ – LGSon

@LGSon我正在水平居中。需要变换来调整'position：absolute;'和'left：50％;' – mdelrossi1

之后的位置如果你这样做，你的问题就不复存在了：http://codepen.io/anon/pen/VKARVL – LGSon

不要使用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>

来源

2016-10-04 19:13:36 LGSon

Safari 9.1.3边框宽度问题

回答

相关问题