不能用 flexbox 布局，因outlook、yahoo、apple mail等主流邮件客户端对 display: flex 完全不支持，会导致文字堆叠、按钮消失或布局错乱；唯一可靠方案是嵌套 table 布局，并严格遵循 width、valign、cellpadding 等传统属性规范。
为什么不能用 Flexbox 布局订阅表单区域
邮件客户端对 display: flex 的支持几乎为零——Outlook、Yahoo、Apple Mail、Foxmail 全部忽略或渲染错乱。你写的 flex-direction: column 在网页预览里看着完美，发到用户邮箱里可能变成文字堆叠、按钮消失、输入框跑出屏幕。这不是“样式没生效”，而是引擎压根不解析该声明。
真实限制比想象中更硬：即使你只在 <div> 上加 <code>style="display:flex"，多数客户端也会直接丢弃整个元素的样式甚至内容。所以别试图“局部用 Flex”，从一开始就要放弃。
- 唯一可靠布局方式是嵌套
<table>：外层定宽（如 <code>width="600"），内部分行分列控制对齐 - 所有文字必须包裹在
<td> 里，不能直接写在 <code><table> 下 <li>需要垂直居中？用 <code>valign="middle"属性，不是align-items - 想留空行？插入
<tr><td height="20" style="font-size:0;line-height:0;"> </td></tr>，别用margin-top -
<form method="POST" action="https://api.yoursite.com/subscribe"></form>：必须是POST，action必须是 HTTPS 真实端点，不能是#或前端路由 -
<input type="email" name="EMAIL" id="email" required autocomplete="email">：字段名按服务商要求（如 Mailchimp 要大写EMAIL），autocomplete="email"是向反垃圾系统表明“这是主动填写” - 每个
<input>必须配<label for="email">Email address</label>，否则 Outlook 和部分安卓邮箱会判定为“伪装字段” - 隐藏防爬字段要无意义：
<input type="hidden" name="h_c8f2" value="">，后端校验该值必须为空；别用name="subscribe"或name="bot" - 宽度统一设为
width="100%"或width="600"，并在外层<table> 加 <code>role="presentation"明确语义 - 字体大小用绝对单位：
font-size:16px，别用rem或em；行高写全：line-height:1.4，而不是line-height:1.4em - 按钮不要用
<button></button>标签——Outlook 会把它转成图片并丢失交互，改用<input type="submit" value="Subscribe now"> - 所有
<img>必须带width和height属性，否则 iOS Mail 会拉伸或裁剪 - 提交瞬间禁用按钮：
document.querySelector('input[type="submit"]').disabled = true，文案改为Submitting… - 别依赖
fetch()后再跳转——纯 HTML 表单就用原生提交，<form></form>自带防重机制（前提是没用 JS 拦截 submit 事件后手动发请求） - 如果必须用 JS 控制（比如加 loading 图标），务必在
event.preventDefault()后手动调用form.submit()，且只调一次 - 后端收到请求后，立即返回 302 跳转到成功页，避免用户刷新导致重复 POST
表单区域必须包含哪些 HTML 结构要素
一个能过反垃圾检测、被主流邮件服务商（Mailchimp/Sendinblue/ConvertKit）正常接收的订阅表单区域，不是“能提交就行”，而是要传递明确的用户意图信号。缺一不可。
移动端邮件客户端里表单区域怎么不被压缩变形
很多团队以为加个 @media 就能响应式，但 Gmail App、iOS Mail、QQ邮箱根本不执行媒体查询。所谓“适配”，其实是靠一套降级策略撑起来的。
表单区域提交后状态怎么处理才不被当重复提交
用户点一次“Subscribe now”，后端收到 3 条重复请求，大概率是因为前端没做防重，而邮件服务商又把多次提交识别为恶意行为，直接进垃圾箱。
<table> 缺少 <code>cellspacing="0" cellpadding="0"，或某处 <p></p> 标签没清掉默认 margin，就可能在 Outlook 里撑破容器、触发自动缩放、甚至让整个表单不可点击。
