低版本浏览器兼容密码输入框的关键是降级兜底：移除非关键html5属性（如autocomplete、pattern），用js手动校验；修复android 4.4 webview光标错位需避免transform、加translateZ(0)或setTimeout聚焦；safari 9/ios 9切换可见需用touchend、blur再type赋值。
低版本浏览器（比如 IE9 及以下、Android 4.4 WebView、旧版 Safari）确实不支持 的某些 html5 行为，但问题往往不在“密码输入框本身”，而在于你依赖了它附带的新特性——比如 autocomplete、pattern、required、或 css 伪类 ::-webkit-textfield-decoration-container 等。老浏览器不报错，但会静默忽略，导致表单验证失效或样式错乱。
IE9 及以下连 type="password" 都渲染异常？
其实不会。所有浏览器都支持基础的 type="password"，它早在 HTML2 就存在。真正出问题的是你混用了 HTML5 属性：
-
autocomplete="new-password"：IE10+ 才开始部分支持，IE9 完全无视，可能让密码生成器失效 -
inputmode="text"或inputmode="none"：仅 chrome/edge 76+、Safari 12.1+ 支持，老 Android WebView 直接丢弃 - 用
:valid/:invalid控制边框颜色：IE9 不支持这些伪类，样式不生效
解决办法是降级兜底：删掉非关键 HTML5 属性，用 JS 补验证逻辑。例如把 required 和 pattern 移除，改用 addEventListener('submit', ...) 在提交时手动校验长度和格式。
Android 4.4 WebView 密码框光标错位、无法聚焦
这是系统 WebView 的著名 bug：当父容器有 transform、perspective 或 overflow: hidden 时， 的软键盘弹出后光标定位偏移，甚至点击无响应。
立即学习“前端免费学习笔记（深入）”；
- 临时修复：给密码框加
style="transform: translateZ(0);"强制触发硬件加速（注意别在父元素上加） - 更稳妥：避免对密码框祖先元素使用
transform；改用margin或top/left布局 - 聚焦问题：不要用
input.focus()后立刻弹键盘，加setTimeout(() => input.focus(), 0)让事件队列清空
密码可见切换按钮在 Safari 9/iOS 9 上点不动
常见做法是用一个 叠在密码框右侧，点击时切换 type 为 "text"。但在 Safari 9 和 iOS 9 中，input.type = "text" 会触发重绘卡顿，且按钮 touchstart 事件可能被输入框拦截。
- 必须用
type="button"显式声明按钮类型，否则某些 WebView 当作 submit - 监听
touchend而非click，避免 300ms 延迟导致误判 - 切换前先
input.blur()，再改type，最后input.focus()，否则光标不出现 - 别用
input.setAttribute('type', 'text')—— Safari 9 不支持动态改type，必须用input.type = 'text'
最麻烦的不是密码框本身，而是你把它当成“普通 input”去写样式和交互，却忘了老浏览器根本不按规范解析现代属性。兼容的关键不是堆 polyfill，而是分清哪些行为可降级、哪些必须用 JS 拦截重写——尤其是涉及焦点、输入法、软键盘联动的部分，CSS 和 HTML 属性基本靠不住。