IE11按钮/输入框错位主因是文档模式未设为Edge，需在head最前加<meta http-equiv="X-UA-Compatible" content="IE=edge">；input塌陷须显式设width:100%和vertical-align:middle；transition应拆解属性避免all，全局启用box-sizing:border-box。
IE11按钮/输入框错位：先看文档模式是不是Edge
错位问题八成不是CSS写错了，而是IE11根本没进现代渲染模式。打开F12开发者工具 → “仿真”选项卡 → 检查“文档模式”是否为Edge；如果是5、7、8等数字，说明页面被强制降级，所有Flex、border-radius、box-shadow都会失效。
必须在<head>最开头（且不能被条件注释包裹）插入：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
注意：Chrome=1已无意义，删掉；若页面跑在file://协议或企业内网，该meta可能无效——需改用HTTP服务，或联系IT关闭全局兼容视图策略。
form-control输入框值存在但不显示：width和vertical-align是关键
IE11对width: 100%在.input-group内部解析异常，常导致<input>缩成一条线，文字不可见。这不是JS或value的问题，是渲染层塌陷。
- 给
.input-group input显式加width: 100%和vertical-align: middle - 避免依赖
display: flex做输入框对齐，IE11的flex子项width: 100%行为不稳定 - 如果用了
height: auto，IE11可能忽略，改用固定高度如height: 42px
Bootstrap 5组件错位：别硬扛，换polyfill或降级
Bootstrap 5默认不支持IE11，:has()、aspect-ratio、IntersectionObserver这些特性在IE11里直接报错或不生效，导致Dropdown、Offcanvas、Toast位置计算全乱。
两个务实选择：
- 引入
bootstrap-ie11项目提供的补丁包，它包含core-js@3、web-animations-js及针对IE11重写的CSS变量回退逻辑 - 更稳妥的做法是降级到
Bootstrap 4.6.2，它原生支持IE10+，只需补core-js@3和CustomEventpolyfill - 禁用Bootstrap 5中依赖
ResizeObserver的组件（如Offcanvas），改用scroll事件+getBoundingClientRect()手动判断位置
transition错位与按钮尺寸跳变：别偷懒写all
IE11对transition: all .2s解析极差，容易导致按钮hover时背景色变了但边框没变，造成视觉错位；同时box-sizing若未全局继承，padding和border会撑出容器范围。
- 把
transition拆成具体属性：transition: background-color .2s, border-color .2s, color .2s - 确保全局有
* { box-sizing: border-box; }，IE11完全支持，但父容器若设了content-box且未声明inherit，子元素就会错位 - 删掉所有
appearance: none和含calc()的border-radius（如border-radius: calc(0.25rem + 1px)），它们会让整条CSS规则被IE11丢弃
真正卡住IE11布局的，从来不是“缺不缺前缀”，而是meta有没有生效、calc()有没有混进去、transition有没有偷懒写all——这些细节一错，整个按钮组或表单区域就飘了。
