地图嵌入用 iframe 最稳，因可绕过JS SDK的白屏、跨域及授权问题；表单需设method="post"和非空action；控件须统一用.form-control类控制尺寸与圆角；地图与表单间留40px间距防误触。
地图嵌入用 iframe 最稳，别碰 JS SDK
现在主流地图服务（高德、腾讯、百度）的 JS SDK 在纯静态页面里容易白屏、跨域报错或触发未授权警告，而 iframe 嵌入是唯一能绕过这些限制的方案。它不依赖你项目里的 JS 环境，也不需要申请密钥，只要给个合法地址链接就能跑。
- 高德地图：在官网「分享」按钮里选「嵌入网页」，复制
iframe代码，注意删掉width和height的固定值，改用 CSS 控制尺寸 - 腾讯地图：搜索地点后点「分享」→「嵌入网页」，默认带
scrolling="no"，保留它，否则 iOS 上会多出滚动条干扰布局 - 百度地图：它的
iframe默认有顶部导航栏，加参数&ie=utf8&newmap=1&lb=1可隐藏，但更推荐直接换腾讯或高德——百度对静态页兼容性差，常出现net::ERR_BLOCKED_BY_CLIENT
form 标签里必须写 method="post" 和 action
很多人只写 form 标签却不设提交行为，导致点击按钮没反应，或者刷新后表单数据全丢。这不是样式问题，是语义缺失。
- 即使前端用 JS 拦截提交，
method和action也得写上，否则部分浏览器（尤其是 Safari 移动端）会忽略submit事件绑定 -
action不一定真指向后端接口，可以是action="#"或action="mailto:xxx@xxx.com"，但不能为空——空值会让表单走浏览器默认跳转，清空当前页 - 别用
button替代input type="submit"，前者默认是type="button"，不会触发表单校验和原生提交逻辑
表单控件宽度和圆角要统一用 CSS 类控制
直接在 input 或 textarea 上写 style="width:100%;border-radius:4px;" 看似快，实则埋雷：不同浏览器对 box-sizing 默认值不同，100% 宽度 + padding 会导致溢出；border-radius 在 textarea 上还可能被某些安卓 WebView 忽略。
- 统一加一个类名如
.form-control，里面写死：box-sizing: border-box; width: 100%; padding: 12px; border-radius: 6px; -
textarea额外加resize: vertical;，禁掉横向拉伸，避免破坏布局 - 所有
input[type="text"]、input[type="email"]、textarea都套这个类，别漏掉select—— 它默认圆角不一致，也得显式重置
地图容器和表单之间留至少 40px 垂直间距
视觉上紧贴的地图和表单会让人误以为二者联动（比如点地图就填地址），其实它们毫无关系。间距太小还会放大移动端误触概率：手指划动地图时容易蹭到下方输入框，弹出软键盘遮挡内容。
立即学习“前端免费学习笔记（深入）”；
- 用
margin-bottom: 40px给地图容器，而不是给表单加margin-top—— 后者在表单动态显示/隐藏时容易引发布局抖动 - 如果用了 CSS Grid 或 Flex 布局，确保地图和表单不在同一个
grid-area或flex-item内，否则 margin 可能被折叠 - 这个间距在 Retina 屏上看起来刚好，低于
32px就显得拥挤，高于48px会让页面显得松散、重点分散
地图坐标不准、表单字段失焦、响应式断点错位——这些问题八成不是代码写错了，而是容器尺寸、嵌入方式、CSS 继承链这三个地方悄悄打架。盯住 iframe 的 src 参数、form 的 action 属性、还有那行 box-sizing: border-box，比调十次颜色更重要。
