iOS下CSS提交按钮文本对齐样式失效的问题

兄弟我太懂这种iOS样式玄学了！我之前也踩过一模一样的坑——明明把按钮的其他默认样式都清干净了，就剩文本死活偏右，在安卓和电脑上都好好的，唯独iOS Safari搞特殊，简直气人😅

其实这都是iOS Safari对表单按钮的“过度关怀”导致的：它会给submit这类表单按钮偷偷套上一堆私有默认样式，其中就包括强制的文本对齐规则，哪怕你写了text-align: center，也会被浏览器的高优先级样式给覆盖掉。

给你几个亲测有效的解决办法，按顺序试：

• 先彻底重置按钮的webkit默认外观，这是最关键的一步：

  button, input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    text-align: center;
    box-sizing: border-box;
    /* 这里再加上你自己需要的样式，比如字体、内边距、背景色之类的 */
  }
  

  appearance: none（加上webkit前缀兼容老版本iOS）能把iOS给按钮加的所有默认外观（包括那些隐藏的对齐逻辑）全部清空，这样你的text-align: center才能生效。

• 如果上面的方法还没搞定，试试强制锁死文本对齐（万不得已再用!important，尽量优先用第一种方法）：

  button, input[type="submit"] {
    text-align: center !important;
  }
  

• 最后排查下宽度和盒模型：要是你给按钮设了固定宽度，记得加上box-sizing: border-box，不然内边距或者边框会把按钮的实际宽度撑大，导致文本的对齐基准偏移，看起来就像偏右了。

我当时就是靠第一个方法解决的，你先试试，应该能搞定这个iOS的小bug！

备注：内容来源于stack exchange，提问作者Fahim