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 解决了大部分问题。但是提交按钮的 "Submit" 文本现在是右对齐的，而不是居中于 iOS，如图所示：http://ben-werner.com/screenshot/01.png

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

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

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

CodePen Link: https://codepen.io/benwerner01/pen/BqErOE (Note: the html formats correctly on the CodePen site, but the same code running within safari or chrome on iOS breaks the button. I have hosted the code from CodePen at https://ben-werner.com , 以证明在移动设备上显示不正确)

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

CSS 属性文本对齐被 iOS 提交按钮的 Webkit 覆盖

CSS property text-align being overridden by iOS Webkit for submit button

html

css

webkit

text-align

ios

CSS 属性 文本对齐被 iOS 提交按钮的 Webkit 覆盖

CSS property text-align being overridden by iOS Webkit for submit button

html

css

webkit

text-align

ios

CSS 属性文本对齐被 iOS 提交按钮的 Webkit 覆盖