ie11按钮显示异常的根本原因是渲染模式未强制为edge、css语法未降级（如含calc()或appearance: none）、transition未写全属性名；必须插入并确认文档模式为edge，禁用calc()和非支持属性，transition需明确列出background-color等属性。
IE11按钮显示异常，不是因为缺前缀，而是前缀没用对、或根本不需要加——真正要动的是渲染模式、CSS语法降级和属性写法。
IE11必须强制Edge文档模式，否则所有前缀都白搭
IE11默认可能回落到IE7/8兼容模式（尤其内网、file://协议下），此时display: flex、border-radius直接被忽略，加-ms-前缀也没用。
- 在
最开头插入：<meta http-equiv="X-UA-Compatible" content="IE=edge">，且不能被条件注释包裹 - 打开F12开发者工具 → “仿真”选项卡 → 确认“文档模式”显示为
Edge，不是5、7、8 - 若仍无效，说明企业组策略锁定了兼容视图，前端无法绕过，需IT侧调整
哪些CSS属性真需要-ms-前缀？哪些加了反而坏事？
IE11原生支持border-radius、box-shadow、transition，但部分老版Bootstrap构建产物会漏掉-ms-，或混入IE11根本不识别的声明（如appearance: none），导致整条规则被丢弃。
- 需要显式补
-ms-的：仅限flex相关属性，如display: -ms-flexbox、-ms-flex-align: center（但更推荐避免用flex: 1简写） - 绝对不要加
-ms-的：border-radius、box-shadow、transition——IE11支持标准写法，加前缀反而可能触发解析错误 - 必须删掉的：任何
appearance: none、user-select: none、含calc()的border-radius（如border-radius: calc(0.25rem + 1px)）
transition和box-sizing是按钮交互失效的高频雷区
IE11对transition的解析比现代浏览器严格得多；box-sizing若未全局重置，会导致按钮尺寸错乱、文字被裁切。
-
transition必须写全属性名：transition: background-color .2s, border-color .2s, color .2s，不能写transition: all .2s - 确保全局有
* { box-sizing: border-box; }，IE11完全支持该值，但若父容器用了box-sizing: content-box且未继承，子按钮padding/border会撑出预期范围 - 输入框类（如
form-control）在IE11中常因width: 100%失效而缩成一条线，需手动加width: 100%和vertical-align: middle
真正卡住IE11按钮的，从来不是“要不要加前缀”，而是meta有没有生效、calc()有没有混进去、transition有没有偷懒写all——这些细节一错，加一百个-ms-也救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
