ie浏览器下bootstrap表单样式异常的根本原因是ie11对appearance、calc()和box-sizing等css声明不兼容，导致整条规则被静默忽略。appearance: none使.form-control样式完全丢失；calc(2.25rem + 2px)因单位混用失效致高度塌陷；box-sizing不继承需显式重置替换元素。
IE浏览器下Bootstrap表单样式异常，根本原因不是“没写对”，而是部分CSS声明被IE直接跳过——尤其是appearance、user-select、calc()和未降级的box-sizing相关规则。
IE11里appearance: none导致整个表单控件样式丢失
Bootstrap 4+ 的 .form-control 默认包含 appearance: none，但 IE11 完全不识别该属性。一旦某条 CSS 规则含 IE 不支持的声明，整条规则都会被忽略（不是只跳过这一项），结果就是 border、padding、background 全部失效，只剩裸文本。
- 检查开发者工具 → “计算样式” → 搜
border-color，若为空或回退到initial，大概率是这条惹的祸 - 临时修复：在自定义 CSS 中覆盖掉，加一句
.form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; }不起作用，得直接删或注释掉原始声明 - 长期方案：用 Autoprefixer 配置
browsers: ["ie >= 11"]，它会自动剔除 IE 不兼容的属性
calc() 在 IE11 表单尺寸计算中静默失败
比如 Bootstrap 4.6 的 .form-control 有 height: calc(2.25rem + 2px)，IE11 对 calc() 支持极弱——仅限简单加减，且单位必须一致（rem + px 直接报错并丢弃整条 height 声明），导致控件高度塌陷或与按钮不齐。
- 验证方式：把
height值手动改成2.5rem或40px，看是否恢复正常 - 不要依赖 PostCSS 插件“修复”
calc()，IE11 不解析就等于没写；应改用固定值或em/rem组合 - 特别注意
input-group内部，.input-group-text和.btn若用了calc()计算行高或 padding，也会错位
box-sizing 在 IE11 表单中继承异常的隐蔽坑
IE11 支持 box-sizing: border-box，但它对 input、textarea 等替换元素的默认 box-sizing 值是 content-box，且不会从父级继承。如果全局重置漏掉了这些标签，表单控件宽度就会因 border 和 padding 撑出容器。
- 必须显式写：
input, textarea, select, button { box-sizing: border-box; }，不能只靠* { box-sizing: border-box; } - 某些定制主题或插件（如
bootstrap-table的.bs-checkbox）会重置box-sizing，需单独检查 - 搭配
width: 100%使用时，若父容器有padding，IE11 下更易溢出——此时应改用flex布局或max-width: 100%
真正麻烦的不是某个属性不支持，而是 IE11 遇到不识别的声明就整条规则放弃，且不报错、不警告。你看到的“样式异常”，往往只是冰山一角，背后可能有三四个被静默跳过的 CSS 块在同时失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
