iOS 上的 Safari 无法渲染按钮文本中心对齐？答案

【问题标题】：Safari on iOS can't render button text center aligned?iOS 上的 Safari 无法渲染按钮文本中心对齐？
【发布时间】：2018-02-27 23:13:46
【问题描述】：

我正在尝试制作带有大文本的<button>（以下为“300kr”）：

但是正如你所看到的，当我使用<button> 标签和大字体时，文本从按钮的中心左对齐（图 2）。它在我检查过的所有其他浏览器中呈现良好。这是 Safari iOS 的错误吗？

按钮的 CSS 代码：

background-color: rgb(0, 0, 0);
border-color: rgb(0, 0, 0);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border-width: 5px;
box-shadow: rgba(0, 0, 0, 0.572549) 0px 7px 34px;
color: rgb(255, 255, 255);
font-family: KGEmpireofDirt;
font-size: 72px;
font-weight: 300;
opacity: 1;
transform: rotate(-20deg);
text-align: center;
width: 100%;
height: 100%;
border-style: solid;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
position: relative;
text-decoration: none;
font-family: Helvetica, sans-serif;
font-weight: 700;
background-color: #6ec8dc;
color: #fff;
border-radius: 6px;
border: 0;
font-size: 100%;
-webkit-appearance: none
outline: 0;
resize: none;

HTML：

<a weld-element="" id="button-5762" class="weld-element weld-container weld-button ng-scope" ng-href="" style="height: 172.23703002929688px; left: 27.243403116862197%; top: 647.8621179414583px; width: 177.01909383137794px; z-index: 103;">
    <button class="weld-child apply-styles ng-binding" id="button-5762-btn" ng-hide="isEditing" style="
        background-color: rgb(0, 0, 0);
        border-color: rgb(0, 0, 0);
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
        border-bottom-left-radius: 100px;
        border-width: 5px;
        box-shadow: rgba(0, 0, 0, 0.572549) 0px 7px 34px;
        color: rgb(255, 255, 255);
        font-family: KGEmpireofDirt;
        font-size: 50px;
        font-weight: 300;
        /* letter-spacing: 0.03em; */
        opacity: 1;
        transform: rotate(-20deg);
        text-align: center;">300kr</button>
</a>

【问题讨论】：

嗯，为什么a 里面有一个button？
@LarsBeck 是的。很长的故事。你认为这是问题所在吗？
从提供的 HTML 和 CSS 我猜是因为我无法发现任何相关的东西，因此问题必须起源于 button 之外的某个地方，“夏季活动”徽章也看起来有点错位

标签： css mobile-safari

【解决方案1】：

解决方案是为按钮设置一个明确的padding: 0。事实证明，Safari iOS 的用户代理样式表与 macOS 的 Safari 不同，其中 padding 默认为 1em。

【讨论】：