移动端HTML邮件模板显示不一致求助：文本框需始终左对齐

原因分析 #

• 移动端邮件客户端默认样式差异：不同邮箱APP（比如iOS自带邮件、Gmail、Outlook移动端）自带的默认样式，可能直接覆盖你设置的文本对齐规则。
• 未使用内联样式：HTML邮件对外部CSS、内部<style>支持极差，大部分移动端客户端会忽略这类样式，必须用内联style属性定义。
• 父容器样式继承：如果文本框的父元素设置了text-align: center，子元素会自动继承这个属性，导致文本框居中。
• 响应式规则冲突：如果模板里写了媒体查询，但没明确指定文本框在移动端的对齐方式，可能触发意外的居中逻辑。

解决方法 #

• 强制内联左对齐样式：给所有需要左对齐的文本框（input/textarea）直接添加内联样式，用!important确保覆盖客户端默认规则：

  <input type="text" style="text-align: left !important; width: 100%;" placeholder="请输入内容">
  <textarea style="text-align: left !important; width: 100%;" rows="3"></textarea>
  

• 重置父容器对齐属性：检查文本框的父元素，确保父容器的文本对齐也是左对齐，避免继承问题：

  <div style="text-align: left; margin: 0; padding: 0;">
    <input type="text" style="text-align: left !important;">
  </div>
  

• 彻底抛弃外部/内部CSS：所有样式都写内联，不要依赖<style>标签里的规则，移动端邮件客户端基本不识别这类样式。
• 多客户端测试：写完后在iOS邮件、Gmail、Outlook移动端实际测试，或者用专业工具批量验证显示效果。

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