提交按钮的 CSS 属性 text-align 被 iOS Webkit 覆盖答案

【问题标题】：CSS property text-align being overridden by iOS Webkit for submit button提交按钮的 CSS 属性 text-align 被 iOS Webkit 覆盖
【发布时间】：2018-10-30 00:32:51
【问题描述】：

以下是表单提交按钮的 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 的代码，以演示在移动设备上显示不正确）

【问题讨论】：

您的 .submit 按钮是否依赖于其他 css 样式？如果桌面版 Chrome 和 safari 将文本显示为居中，则很可能是媒体查询问题而不是 webkit 问题。您的移动设备上的样式可能会导致您的文本正确对齐。
我的媒体查询都不会影响 .submit 按钮，它们只会改变图像的宽度。甚至在桌面上，当你低于 320 像素到 iOS 设备的大小时，按钮也不会损坏，这就是为什么我认为 iOS 设备上会发生一些奇怪的事情。
你能把你的 html 和 css 添加到 codepen 或 jsfiddle 并发送链接。这将允许我们在手机上进行测试并使用 Web 开发者控制台。
我已在 CodePen 上添加了独立的 .submit 按钮的代码，并将其托管在我的个人网站上，以便您可以在自己的移动设备上查看。
感谢您将其发布到 codepen！我能够对其进行调查并在下面发布了答案。

标签： html ios css webkit text-align

【解决方案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;
 }

【讨论】：

非常感谢！我设置了width: none; height: none;，它成功了。