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邊框寬度問題

回答

相關問題