IE完全不支持:placeholder-shown伪类，需用JavaScript监听input/focus/blur事件并切换placeholder-shown类，结合placeholder=" "属性和class驱动CSS降级实现兼容。
IE完全不支持:placeholder-shown，必须用class模拟
IE（包括Edge 12–17）压根不认识:placeholder-shown这个伪类，CSS解析器直接跳过整条规则，不是样式没生效，而是规则被忽略。别试前缀、权重提升或!important——它连语法都没认出来。
唯一可行路径是用 JavaScript 监听状态，手动切换 class：
-
input.value.trim() === ""作为“应显示占位符”的判断依据，比input.value === ""更鲁棒（过滤空格、零宽字符等） - 必须监听
input、focus、blur三个事件，缺一不可：input保证实时响应，focus/blur处理初始聚焦和失焦后状态 - 初始加载后立刻调用一次更新函数，避免 SSR 或 JS 初始化延迟导致 class 状态错位
- HTML 中仍需保留
placeholder属性（哪怕placeholder=""），否则 IE 连占位符都不渲染，JS 也没法模拟语义
为什么不能只监听input事件？
仅靠input事件在 IE 中会漏掉关键场景：
- 用户点击输入框但未输入任何内容（此时占位符仍显示，但
input事件不触发） - 表单重置（
form.reset()）后，value 清空但input事件不发射 - 某些旧版 IE 对粘贴、自动填充的
input事件支持不稳定，focus和blur能兜底
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
const input = document.querySelector('input[placeholder]');
const update = () => {
const isEmpty = input.value.trim() === '';
input.classList.toggle('placeholder-shown', isEmpty);
input.classList.toggle('has-value', !isEmpty);
};
input.addEventListener('input', update);
input.addEventListener('focus', update);
input.addEventListener('blur', update);
update(); // 初始同步
兼容性 fallback 的 CSS 写法
IE 下所有依赖:placeholder-shown的样式都要降级为 class 驱动：
- 不要写
input:placeholder-shown { ... }，改用input.placeholder-shown { ... } - 按钮禁用态别用
input:placeholder-shown ~ button，换成input.placeholder-shown ~ button - 浮动标签别依赖
input:not(:placeholder-shown) + label，改用input.has-value + label - 避免嵌套过深的选择器（如
.form-group input.placeholder-shown + label），IE8–10 对复杂选择器解析有上限
最容易被忽略的 DOM 细节
IE 对placeholder属性的处理很僵硬：
-
placeholder=" "（空格）会被 IE 当作有效值并渲染占位符，但placeholder=""在部分 IE 版本中不触发占位逻辑——建议统一用placeholder=" "保底 - JS 动态设置
input.setAttribute('placeholder', '...')在 IE9–10 中可能不触发重新渲染，必须在 HTML 中硬编码 - IE 不支持
:focus-within，所以无法用父容器判断聚焦状态，得靠input:focus+input.placeholder-shown组合 class 控制
真正卡住人的从来不是怎么写 JS，而是 IE 对 placeholder 属性的“存在即渲染”逻辑——它不看语义，只看属性是否在初始 HTML 中存在且非空字符串。
