ie6–ie7中form默认外边距导致错位，需form{margin:0}前置声明；select在ie下宽度偏小，应单独加大并控制padding；ios旧版safari placeholder渲染异常，须js模拟；ie9–10 required校验失败无提示，需手动拦截submit并验证。
form 默认外边距在 IE6–IE7 中导致上下错位
IE6–IE7 给 form 元素默认加了 margin-top 和 margin-bottom，而 Firefox、Chrome 等现代浏览器没有，结果就是表单突然“飘”起来或跟前后内容脱节。这不是 bug，是历史遗留的渲染差异。
直接写 form { margin: 0; } 就能解决，但要注意两点：
- 必须放在所有其他样式之前，否则可能被后续规则覆盖
- 如果用了 Normalize.css 或 Reset，它通常已处理该问题；但若手写重置，别漏掉
form - 不要只靠
* { margin: 0; }—— 过于暴力，可能影响按钮、输入框等内部元素的默认间距
input 和 select 宽度不一致，尤其在 IE 下
哪怕你给 input[type="text"] 和 select 都设了 width: 200px，IE6–IE8 渲染时 select 总是窄一截，原因是它的内边距和边框计算方式不同，且无法通过 box-sizing 统一（IE8 才部分支持）。
稳妥做法是分情况处理：
- 对
select单独加大宽度：比如select { width: 204px; }（多 2–4px），再配合padding: 0;控制内部空白 - 避免用百分比宽度——IE6 对父容器宽度计算不稳定，容易撑破或缩紧
- 如果项目允许，用 JS 动态测量
input实际宽度，再赋给select：select.style.width = input.offsetWidth + 'px';
placeholder 在旧版 iOS Safari 中光标错位或不消失
iOS 6–8 的 WebKit 存在 placeholder 渲染缺陷：输入时文字和 placeholder 叠在一起，光标位置偏移，甚至清空后 placeholder 还残留。这不是 CSS 能调的，是底层渲染层问题。
必须用 JS 模拟：
- 检测是否支持原生 placeholder：
'placeholder' in document.createElement('input') - 不支持时，监听
focus/blur，手动插入/移除提示文字，并加 class 标识状态（如has-placeholder） - 注意清除逻辑：用户输入空格后提交，要判断
value.trim() === ''，不能只看value === '' - 别用
!important强行覆盖 placeholder 颜色——旧版 Safari 会忽略，反而让模拟逻辑更难调试
required 提交失败却无提示，卡在 IE9–10
IE9–10 认得 required 属性，也执行校验，但既不显示红边框，也不触发 invalid 事件，表单 submit 后静默失败，用户完全不知道哪错了。
必须手动接管校验流程：
- 监听表单的
submit事件，第一时间event.preventDefault() - 遍历所有带
required的字段，检查el.value.trim() === ''（别用el.validity.valueMissing，IE9 下恒为false） - 给出视觉反馈：加
is-invalidclass，配合 CSS 显示红框或下方提示文案 - 焦点跳转到第一个错误项：
el.focus()，别依赖浏览器自动聚焦
真正麻烦的不是写这几行 JS，而是所有依赖原生 :invalid 伪类的样式、所有绑定在 invalid 事件上的逻辑，在 IE9–10 下全得重写一遍——这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
