placeholder在部分浏览器不显示的根本原因是其依赖元素的“可输入”语义，一旦使用非表单控件（如contenteditable div）、受限类型（如type="number"）、隐藏样式或未加载字体，浏览器便会忽略该属性。
placeholder 为什么在某些浏览器里压根不显示
常见现象是：Chrome 看着好好的，一换 Safari 或旧版 Edge 就没提示文字；或者用了 contenteditable、type="number" 后突然消失。根本原因不是“写错了”，而是 placeholder 本质是纯展示属性，一旦元素失去“可输入”语义，浏览器就直接忽略它。
-
type="number"、type="date"等控件在部分 Safari/iOS 版本中不支持 placeholder（尤其 iOS 15.4 之前） - 给
div[contenteditable]加 placeholder 没用——它不是表单控件，HTML 标准不定义该行为 - CSS 里写了
opacity: 0或visibility: hidden到 input 本身，也会让 placeholder 一起不可见（哪怕你只对 value 做了隐藏） - 用了自定义字体但未加载完成，某些浏览器会延迟渲染 placeholder 文字（表现为“闪一下就没了”）
怎么让 placeholder 在所有主流环境都稳住
别依赖 CSS 伪元素硬改，也别用 JS 模拟“占位文字”来覆盖原生逻辑——容易和 focus/blur、无障碍读屏冲突。最可靠的方式是守住两个前提：元素必须是原生可编辑表单控件，且未被样式或类型禁用语义。
- 确保用的是
<input>或<textarea></textarea>，不用div或span伪装 - 避免
type="number"等语义受限类型；如需数字输入，用type="text"+inputmode="numeric"+pattern="[0-9]*" - 检查 CSS 是否意外重置了
::placeholder，比如写了::placeholder { color: transparent; }却忘了 fallback - 在 iOS/Safari 上，如果 placeholder 仍不显示，加一行
style="min-height: 1em;"到 input——某些版本对行高为 0 的 input 会跳过 placeholder 渲染
::placeholder 伪元素样式失效的典型场景
不是所有浏览器都支持完整的伪元素修饰，尤其是老版本或 WebKit 内核变种。写法稍有偏差就会整个失效，而不是“部分生效”。
- 必须用标准前缀组合：
::placeholder（现代）+::-webkit-input-placeholder（Safari/旧 Chrome）+::-moz-placeholder（Firefox 18–19）+:-ms-input-placeholder（IE10–11） - 不能嵌套写法，比如
input::placeholder span是无效的——::placeholder本身不产生子节点 - 如果父容器有
transform或filter，部分 Safari 版本会裁掉 placeholder 文字（加will-change: transform;可缓解） - 使用 CSS 自定义属性时，
color: var(--hint-color);在 IE 中不生效，得单独写死值
真要兼容极老环境（IE9 或 Android 4.x）怎么办
原生 placeholder 属性在 IE9 及更早版本完全不支持，Android 4.3 及以下 WebView 对 ::placeholder 支持极差。这时候不能靠“打补丁式 CSS”，得降级为 JS 控制的视觉占位。
立即学习“前端免费学习笔记（深入）”；
- 检测支持性：用
'placeholder' in document.createElement('input')判断是否原生支持 - 不支持时，动态插入一个同位置、同字体、灰色文字的
label或span，并监听focus/blur切换显隐 - 务必加
aria-hidden="true"到模拟 placeholder 元素，否则读屏器会重复读出“用户名 用户名” - 避免用
value模拟 placeholder（比如 onload 设 value 再清空），会导致表单初始值误提交
placeholder 的坑不在写法多难，而在于它太轻——轻到浏览器随时可以把它当装饰去掉。只要动过 type、加过 transform、换过字体、或者想在非 input 上“假装”有 placeholder，就得重新验证它还在不在。
