Bootstrap响应式隐藏类在IE8/IE9不生效，根本原因是其依赖CSS3媒体查询和现代display值，而IE8不支持@media，IE9仅部分支持且受DOCTYPE影响；安全替代方案是用Bootstrap3类、手动媒体查询或JS回退。
Bootstrap 的响应式隐藏类（比如 .d-none、.d-md-block）在 IE8/IE9 或某些老浏览器中直接不生效，根本原因是这些类依赖 CSS3 的媒体查询（@media）和现代 display 属性值（如 flex、grid），而老浏览器根本不识别它们——不是写错了，是压根“看不见”。
IE8/IE9 为什么连 .d-none 都不认
Bootstrap 4+ 完全放弃对 IE8/IE9 的支持，其响应式工具类全部基于 CSS3 媒体查询 + 现代 display 值。IE8 不支持 @media 查询，IE9 虽支持但只认 screen 类型且有解析限制；更关键的是，.d-none 编译后是 display: none !important，而 IE8/IE9 对 !important 在某些上下文里处理异常，尤其当它和旧版 IE 的 hasLayout 触发逻辑冲突时。
- IE8：完全忽略所有
@media (min-width: ...)规则，所以.d-md-none这类断点类等于不存在 - IE9：能解析部分媒体查询，但若页面未声明
，会触发怪异模式（Quirks Mode），此时连基础 <code>display: flex都会被降级为display: block - Bootstrap 3 的对应类（如
.hidden-xs）用的是display: none+ 媒体查询，但同样受 DOCTYPE 和渲染模式制约
.d-*-none 在 IE10/IE11 中显示错乱的常见原因
IE10/IE11 理论上支持媒体查询和 display: none，但实际项目中仍常出问题，多因混合了 Flex 布局或伪类干扰：
- 父容器用了
display: flex，子元素设.d-sm-none后，IE11 有时仍保留 flex item 的占位空间（不真正 collapse） - 使用了
:not()或其他 CSS4 选择器（如.d-none:not(.show)），IE11 不支持，整条规则被丢弃 - 通过 JavaScript 动态添加 class，但 IE11 对 classList API 支持不完整（
classList.toggle('d-none', bool)在某些 patch 版本会失败） - 自定义 CSS 里写了
display: contents或display: flow-root，IE 完全无视，导致隐藏逻辑被覆盖
老浏览器下替代 .d-*-* 的安全写法
真要兼容 IE9+，别硬扛 Bootstrap 4+ 的工具类，改用语义明确、降级友好的组合：
- 用
.hidden-xs/.visible-sm这类 Bootstrap 3 的类（前提是项目还在用 BS3）——它们只依赖基础媒体查询和display，IE9+ 可靠 - 手动补媒体查询，避免用
!important：@media (max-width: 767px) { .hide-on-mobile { display: none; } } - JavaScript 回退：检测
matchMedia是否可用，不可用时直接操作style.display：if (!window.matchMedia) { element.style.display = 'none'; } - 绝对不要在 IE 场景中混用
.d-flex和.d-none—— Flex 容器里的display: none在 IE10/11 中行为不稳定，优先用visibility: hidden+position: absolute模拟隐藏
最易被忽略的一点：即使加了 <meta http-equiv="X-UA-Compatible" content="IE=edge">，如果服务器返回的 HTTP header 里带了 X-UA-Compatible: IE=EmulateIE7，前端 meta 标签会被强制覆盖——这种问题只能查网络面板，光看 HTML 是发现不了的。
