Bootstrap 3在新版浏览器显示异常的根本原因是其依赖的底层技术被弃用：box-sizing被覆盖导致栅格错位、float布局在flex/grid容器中失效、Glyphicons字体因CORS或协议限制加载失败、IE专用hack触发规则丢弃。
Bootstrap 3 的 CSS 在新版浏览器（Chrome 120+、Firefox 125+、Safari 17+）里显示异常，根本原因不是“样式写错了”，而是它依赖的底层技术已被现代浏览器弃用或行为变更——尤其是 box-sizing 默认值、float 布局逻辑、@font-face 字体加载策略，以及大量已移除的 IE 专用 hack。
box-sizing: border-box 被重置或覆盖
Bootstrap 3 的全局重置（*, *:before, *:after { box-sizing: border-box; }）在某些现代 CSS 框架（如 Tailwind、modern-normalize）或自定义 reset 后被覆盖。一旦回退到 content-box，所有 .col-md-6 宽度计算就错位，表现为栅格塌陷、边距溢出。
- 检查开发者工具中元素的 computed
box-sizing值，如果不是border-box，说明被覆盖 - 在 Bootstrap CSS 引入后，加一行强制修复：
* { box-sizing: border-box !important; }（仅临时调试用） - 更稳妥的做法：删掉项目里其他 reset.css 或 normalize.css，或确保 Bootstrap 3 的 CSS 是第一个引入的样式表
float-based grid 在 Flex/Grid 环境下失效
Bootstrap 3 的网格系统完全基于 float: left + clear: both，而现代浏览器对浮动元素的 BFC 触发规则更严格。当父容器启用了 display: flex 或 display: grid（哪怕只是某个外层 wrapper），子级的 .row 就会脱离文档流，导致列全部堆叠在左上角。
- 典型现象：
.row高度为 0，.col-xs-12全部挤成一列且无间隙 - 不要把
.row放在flex容器内部；若必须嵌套，给.row加display: block !important;和width: 100%; - 避免用现代布局工具（如 daisyUI、Chakra UI）的容器类包裹 Bootstrap 3 组件，它们常默认设
display: flex
Glyphicons 字体加载失败或 fallback 错乱
新版 Chrome/Firefox 已禁用不带 CORS 头的字体跨域加载；Safari 16+ 对 data: 协议字体或 base64 内联字体更敏感。即使路径正确，glyphicons-halflings-regular.woff 也可能静默失败，最终渲染为方框 □ 或 Unicode 替代符。
立即学习“前端免费学习笔记（深入）”；
- 打开 Network 面板，筛选
font，看是否返回 0B 或 status(blocked) - 确认服务器对
.woff和.woff2文件返回了Access-Control-Allow-Origin: * - 若用本地文件开发，别直接双击 HTML 打开（file:// 协议禁字体），改用
python3 -m http.server启服务 - 临时兜底：在 CSS 中为
.glyphicon加font-family: 'Glyphicons Halflings' !important;并确保该声明在所有其他 font-family 之后
IE-specific hacks break modern parsing
Bootstrap 3 内置了大量针对 IE8/9 的 hack，比如 *zoom: 1、_display: inline-block、filter: alpha(opacity=80)。这些语法在新版浏览器中虽被忽略，但若混在关键选择器里（如 .btn:hover *zoom: 1），可能触发整个规则块被丢弃——尤其当使用 PostCSS 或构建工具自动 purge 时，会误删有效声明。
- 用浏览器 DevTools 的 Styles 面板逐条检查目标元素，看是否某条规则显示为 “invalid” 或灰色禁用
- 搜索 CSS 源码中的
*和_开头属性，手动注释掉非必要 hack（例如非 IE 场景下根本不需要*zoom） - 如果用了 Autoprefixer，确保配置中
overrideBrowserslist不包含ie >= 8，否则它会反向注入更多旧式 hack
真正棘手的不是某一条样式错，而是 Bootstrap 3 的整套假设（浮动布局、全局 box-sizing、IE 字体加载）和现代浏览器的默认行为之间存在系统性偏移。修一个 col 错位，往往要同步检查 reset 顺序、父容器 display 类型、字体 CORS 策略、甚至构建工具是否悄悄污染了 CSS。没有银弹，只有逐层验证。
