iOS设备text-align:center样式不生效 搜索按钮文字错位如何解决

• iOS Safari 对type="submit"的输入框有预置默认样式，包括默认内边距、圆角、字体渲染规则，和PC端/模拟端的渲染逻辑不一致，原有样式没有覆盖这部分默认配置
• 提交按钮的现有样式设置冲突：给高度仅25px的按钮设置了padding-bottom:20px，上下内边距严重不均，直接导致文字偏移甚至被截断
• 多余的无效属性：按钮上的left、top属性没有配套定位规则，属于无效代码，部分浏览器解析异常也可能影响渲染
• form标签使用了错误的自闭合写法，导致DOM结构解析异常，可能加剧样式错位

1. 首先修正form标签的闭合错误，把原有自闭合的<form .../>改成正常的开闭结构，后续input和script都包在form内部，最后添加</form>闭合标签
2. 替换提交按钮的行内样式，覆盖iOS默认样式，修正内边距配置：
   把原有提交按钮代码

<input class="search1" type="submit" name="submition" value="Search" style="padding-bottom:20px; left: 0px; top: 153px; height: 25px; width: 46px;"/>

替换为：

<input class="search1" type="submit" name="submition" value="Search" style="height: 25px; width: 50px; padding: 0; line-height: 25px; text-align: center; -webkit-appearance: none; appearance: none; border: 1px solid #ccc; border-radius: 0;"/>

新增样式说明：

• -webkit-appearance: none; appearance: none; 完全清除iOS Safari对按钮的默认样式
• padding: 0 清除默认内边距，避免内容偏移
• line-height: 25px 和高度保持一致，保证文字垂直居中
• 宽度调整到50px、手动定义边框样式，避免iOS默认样式挤占内容空间导致文字截断

3. 如果仍有轻微偏移，可以给.search1额外添加text-indent: 0属性清除iOS默认的文字缩进。

内容的提问来源于stack exchange，提问作者Richard