ie11支持::before/::after双冒号语法，无需降级为单冒号；但::placeholder不被识别，必须改用私有选择器:ms-input-placeholder。
IE11 支持 ::before 和 ::after，但不支持 ::placeholder——它只认 :ms-input-placeholder（单冒号、带前缀）。所谓“双冒号改单冒号”在 IE11 里不是通用解法，而是分场景：伪元素主体（::before/::after）可直接用双冒号，但占位符必须换写法。
IE11 中 ::before/::after 不需要改成单冒号
IE9–11 原生支持 ::before 和 ::after 双冒号语法，无需降级。常见错误是误以为 IE11 跟 IE8 一样必须写 :before，结果反而多此一举引入冗余声明，还可能因顺序错乱导致样式覆盖失效。
- ✅ 正确做法：
.btn::before { content: "→"; }在 IE11 中完全可用 - ❌ 错误操作：为兼容 IE11 特意写成
.btn:before, .btn::before—— 这对 IE11 没增益，只增加 CSS 体积 - ⚠️ 注意点：IE11 不支持
content中的url()加载 SVG（会报 404），但 base64 data URI 可用
::placeholder 在 IE11 必须换成 :ms-input-placeholder
IE11 完全无视标准 ::placeholder，也不接受 :placeholder（无前缀单冒号），唯一有效的是微软私有写法 :ms-input-placeholder。PostCSS 的 autoprefixer 默认不处理这个，得手动补。
- ✅ 必须这样写：
input:ms-input-placeholder { color: #999; } - ❌
input::placeholder或input:placeholder在 IE11 中静默失效 - ? 如果用了 PostCSS，需额外加插件如
postcss-pseudo-elements或手写 fallback 规则，autoprefixer 本身不生成:ms-input-placeholder
为什么不能靠 Autoprefixer 自动补全 :ms-input-placeholder
autoprefixer 的设计目标是补厂商前缀（如 -webkit-），而 :ms-input-placeholder 是一个完整不同的选择器名称，不是简单加前缀能解决的。它属于“特性缺失型兼容”，不是“语法前缀型兼容”。
- ? 查看
browserslist配置再全，not ie 或 <code>ie 11都不会触发:ms-input-placeholder补全 - ? 构建时若想自动化，得用
postcss-custom-selectors+ 自定义映射，或在 Sass 中用 Mixin 封装：@mixin placeholder { &::-ms-input-placeholder { @content; } &::placeholder { @content; } } - ⚠️ 深色模式下动态切颜色？别用
@media (prefers-color-scheme: dark)包裹整个规则块——IE11 不支持该媒体查询，且伪元素选择器本身不支持嵌套媒体查询
Sass/Mixin 封装时最容易漏掉的 IE11 兼容细节
用 Sass 写 &::placeholder 很顺手，但编译后只有标准语法，IE11 用户就看不到 placeholder 样式。Mixin 可以强制补全，但必须显式判断 IE 场景，不能依赖 autoprefixer。
- ✅ 推荐写法：
@mixin input-placeholder($color) { &::-ms-input-placeholder { color: $color; } &::placeholder { color: $color; } } - ❌ 不要只写
&::placeholder然后指望构建工具“自动修复” - ⚠️ IE11 对
content属性零支持——::placeholder本就不允许设content，这点和::before有本质区别，混淆会导致调试时反复怀疑是不是路径或引号错了
真正麻烦的不是写法切换，而是不同伪元素在 IE11 中的“支持断层”：有的（::before）早被支持，有的（::placeholder）必须换名，还有的（::selection）连单冒号都不认。盯着一个伪元素调半天，往往是因为默认假设了“所有伪元素行为一致”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
