html - CSS 属性文本对齐被 iOS Webkit 覆盖以用于提交按钮

Question

以下是我的表单提交按钮的 CSS 代码:

.submit {
    -webkit-appearance: none !important;
    text-align: center !important;
    border-radius: 0rem;  
    color: rgb(63, 42, 86);
    display: inline-block;
    float: right;
    border: none;
    font-size: 14px;
    border-left: 0.05rem solid rgb(63, 42, 86);
    width: 3.6rem;
    height: 2.2rem;
    line-height: 1.75rem;
    transition: background-color 0.2s;
    background-color: transparent;
}

在 iOS 上出现一些初始格式问题后，我实现了 -webkit-appearance: none 解决了大部分问题。但是提交按钮的“提交”文本现在是右对齐的，而不是在 iOS 上居中，如下图所示:http://ben-werner.com/screenshot/01.png

然而，在使用 chrome 和 safari 的桌面版本上，文本显示居中:http://ben-werner.com/screenshot/02.png

我不认为这是一个特异性问题，因为 text-align:center 的 !important 声明应该可以防止我的 CSS 中的任何其他内容覆盖它。

有谁知道 iOS 设备上发生了什么导致提交文本功能不同？非常感谢任何帮助，谢谢!

CodePen 链接:https://codepen.io/benwerner01/pen/BqErOE (注意:CodePen 网站上的 html 格式正确，但在 iOS 上的 safari 或 chrome 中运行的相同代码会破坏按钮。我在 https://ben-werner.com 托管了来自 CodePen 的代码，以证明它在移动设备上显示不正确)

Answer 1

好的，我知道现在发生了什么。您为提交按钮指定了特定的宽度和高度，这会影响 iOS 设备上的文本对齐。删除了宽度和高度值，您的文本将在 iOS 设备上居中对齐。我还会使用填充来为您的按钮提供所需的宽度和高度，而不是那些属性。

.submit#mc-embedded-subscribe {
 border-radius: 0 !important;
 -webkit-appearance: none !important;
 color: rgb(63, 42, 86);
 float: right;
 border: none;
 font-size: 14px;
 border-left: 0.05rem solid rgb(63, 42, 86);
 /*     width: 3.6rem;
       height: 2.2rem; */
 text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
 line-height: 1.75rem;
 transition: background-color 0.2s;
 background-color: transparent;
 margin: 0 auto;
 }