• 前端
• UI组件

本文聚焦 BOOTSTRA.386（一款复古 DOS 风格 Bootstrap 主题）所基于的 Bootstrap v4.4.1 官方"浏览器 Bug 墙"（Wall of browser bugs）文档，系统梳理 Bootstrap 在 Edge、Firefox、Chrome、Safari 及 iOS 等主流浏览器中已知且无法由框架自身修复的上游缺陷清单、最受期待的 Web 标准特性请求，并结合本仓库源码逐条验证其缓解手段与底层实现。读完本文，你将掌握：如何查证与跟踪这类浏览器缺陷、哪些已知 Bug 会直接影响你的页面布局与组件行为、框架通过哪些源码级规避措施来"绕行"这些缺陷，以及如何利用.browserslistrc与 Autoprefixer 建立自己的跨浏览器兼容基线。

一、什么是"浏览器 Bug 墙"：Bootstrap 的跨浏览器兼容策略

Bootstrap 的核心承诺是"在尽可能多的浏览器上提供一致的体验"。但 Web 平台本身存在大量由浏览器厂商实现差异导致的历史遗留缺陷，其中一部分无法通过 CSS/JS 层面的优雅代码绕开——它们只可能由 Chromium、Mozilla、WebKit 等上游项目修复。

因此 Bootstrap 官方文档维护了一份公开的"浏览器 Bug 墙"（browser-bugs.md），以表格形式罗列：

• Browser(s)：受影响的浏览器及其平台（如 Edge、Firefox、Chrome (macOS)、Safari (iOS)）；
• Summary of bug：Bug 的行为描述；
• Upstream bug(s)：上游浏览器厂商的缺陷编号（如Edge#9011176、Mozilla#1023761、Chromium#429375、WebKit#156684）；
• Bootstrap issue(s)：Bootstrap 仓库中跟踪该问题的 Issue 编号（如Bootstrap#20755）。

公开这份清单的动机在文档中表述得很直接：希望通过公开展示这些缺陷，加速上游浏览器厂商修复它们。同时它也提醒使用者——某些问题无论你的 CSS 写得多么严谨，都可能在特定浏览器上出现，这不属于框架的缺陷。

在 BOOTSTRA.386 仓库中，这一机制被完整保留：文档主体是 Jekyll 模板（使用{% for bug in site.data.browser-bugs %}遍历数据），实际数据源位于 browser-bugs.yml 与 browser-features.yml，两个 YAML 文件分别驱动两张表格的渲染。模板中引用的bugify.html（v4.4.1/site/_includes/bugify.html）是一个精巧的链接生成器：它把Bootstrap#20755、Edge#9011176、Mozilla#1023761、Chromium#429375、WebKit#156684这类分类#编号字符串解析为对应的上游缺陷跟踪页链接（Bootstrap Issue、Edge 平台 Issue、Bugzilla、Chromium 追踪器、WebKit Bugzilla 等），并自动处理逗号分隔的多编号情形。

二、浏览器支持基线：先明确"支持的边界"

在讨论 Bug 之前，必须明确 Bootstrap v4.4.1 声明的支持范围——因为"不支持的浏览器里出现的怪异表现"不属于 Bug 墙的范畴。官方支持策略记录在 browsers-devices.md：

• 总体原则：支持所有主流浏览器与平台的最新稳定版；Windows 平台额外支持 Internet Explorer 10-11 与 Microsoft Edge；
• 非官方支持：基于最新 WebKit / Blink / Gecko 内核的替代浏览器（如 Linux 版 Chromium、Chrome、Firefox）"在大多数情况下"能正常显示与运行，但不在官方支持列表内；
• 移动端：支持各平台默认浏览器的最新版，明确不支持代理浏览器（Opera Mini、Opera Mobile Turbo 模式、UC Browser Mini、Amazon Silk）。

具体版本基线由仓库根目录的 .browserslistrc 定义，其内容如下：

# https://github.com/browserslist/browserslist#readme >= 1% last 1 major version not dead Chrome >= 45 Firefox >= 38 Edge >= 12 Explorer >= 10 iOS >= 9 Safari >= 9 Android >= 4.4 Opera >= 30

这份配置同时被两个环节消费：Autoprefixer依据它决定自动添加哪些厂商前缀（见 build-tools.md 中 "Autoprefixer" 一节），Browserslist则把它作为跨工具共享的浏览器版本数据源。如果你在自己的项目中引入 BOOTSTRA.386 或 Bootstrap v4，完全可以复制同样的规则来对齐兼容基线。

需要特别提醒的是迁移边界：v4 放弃了对 IE8/IE9 与 iOS 6 的支持（最低 IE10+、iOS 7+），这记录在 migration.md 的 "Browser support" 一节——如果你仍需要 IE8-9 兼容，应退回 Bootstrap 3。

三、逐浏览器 Bug 清单（核心数据全量呈现）

以下数据全部来自 browser-bugs.yml，是文档对应表格的完整事实来源。编号均按上游仓库#Issue编号格式给出，可在上游追踪器中直接检索。

3.1 Edge（桌面版）

3.2 Firefox（含平台变体）

3.3 Chrome（含 macOS 变体）

3.4 Safari 与 iOS

要点归纳：iOS Safari 的缺陷主要集中在position: fixed、模态滚动与输入框光标三大类——这正是移动端弹层组件最容易踩坑的区域；Edge/Chrome 则更多是渲染残影、:hover粘滞与表格边框类问题。

四、"最想要的特性"：框架在等待哪些 Web 标准

Bug 墙的下半部分是Most wanted features清单——这些特性已写入 Web 标准，但因部分浏览器尚未实现，导致 Bootstrap 无法借助它们把代码写得更健壮、优雅或高效。数据源见 browser-features.yml：

解读：这份清单呈现了三条主线——无障碍焦点行为（四家浏览器都涉及）、选择器能力缺口（:dir()与:nth-child(of ...)）以及原生交互元素（<dialog>、transitioncancel）。值得注意的是transitioncancel的 Bootstrap 侧 Issue 同时标注了Chromium#437860（Bootstrap 自身关联的 Chromium 追踪条目）与Bootstrap#20618，说明该问题在框架内部被多个组件（如折叠、弹层动画）依赖。

五、源码级缓解：框架如何在代码里"绕行"这些 Bug

Bug 墙的价值不只是记录，还在于对应代码里的规避痕迹。从 BOOTSTRA.386 的 v4.4.1 源码中可以找到多处直接针对上表缺陷的注释与实现：

5.1 模态框滚动与 iOS-webkit-overflow-scrolling

模态框样式源码 中有一处注释直接点名 Bug 墙里的 iOS 缺陷：

// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342 // See also https://github.com/twbs/bootstrap/issues/17695

对应 Bug 墙中的WebKit#158342（模态框加高后无法滚动）。规避策略是故意不启用-webkit-overflow-scrolling: touch，避免触发该渲染缺陷；同时.modal自身使用overflow: hidden配合.modal-open上的overflow: hidden来"杀死"页面滚动（对应 iOS 上overflow:hiddenbody 仍可滚动的问题 WebKit#153852）。

另一个联动点：.modal-dialog设置pointer-events: none、.modal-content反设pointer-events: auto（v4.4.1/scss/_modal.scss 与 L116-L118）——这正是为了配合"点击任意处关闭模态框"的交互在点击事件行为异常的 iOS Safari（WebKit#151933，点击 body 不触发 click）下仍能正常工作。

5.2 表格边框与.table-bordered

表格样式源码 中.table-bordered的实现：

.table-bordered { border-collapse: collapse; td, th { border: 1px solid $table-border-color; @include dos-border-single($white, $character-space: 1); } }

在 BOOTSTRA.386 中，边框绘制通过 mixins/_dos.scss 中的dos-border-single/dos-border-background混入实现——它在真实渲染层之上叠加了主题特有的 DOS 字符间距视觉样式。这直接关联 Bug 墙中的Firefox#1023761（空<tbody>导致.table-bordered缺边框）与Chromium#749848（table-cell边框不重叠）：因为border-collapse: collapse会与这些浏览器的边框合并行为冲突，框架在打印样式（_print.scss）中又显式强制border: 1px solid $gray-300 !important来兜底打印场景。

5.3 打印与定宽容器

针对Safari#19435018 / WebKit#138192（打印定宽.container时字体过小），文档在 browsers-devices.md 中给出过经典补丁：

@media print { .container { width: auto; } }

而 v4 的打印样式进一步统一了跨浏览器表现：_print.scss 通过@page { size: ... }与body { min-width: ... }规范打印尺寸，并借助$enable-print-styles变量控制整份打印 CSS 是否编译——这也是 migration.md 中提到的"跨浏览器打印预览修复"的落地实现。

5.4 文档页自身的展示优化

最后，Bug 墙表格在文档站内也有专门样式：_browser-bugs.scss 定义了.bd-browser-bugs类——td p { margin-bottom: 0; }收敛摘要列的段落间距，th:first-child { width: 18%; }固定浏览器列宽度，使这张密集表格在窄屏下保持可读。该 SCSS 通过 docs.scss 的@import "browser-bugs";被引入编译。

六、实战建议：在自己的 BOOTSTRA.386 项目里如何应对

综合以上文档与源码证据，给出可落地的跨浏览器实践清单：

1. 先对齐基线：复制仓库根目录 .browserslistrc 到你的构建项目，确保 Autoprefixer 生成的厂商前缀与 Bootstrap 声明支持的范围一致；需要 IE10-11 或 Edge 12+ 时务必保留其中的Explorer >= 10/Edge >= 12规则。

2. 锁定高危场景做回归测试：根据 Bug 墙分布，重点回归以下组合——

   • iOS Safari +position: fixed（弹层、吸底按钮）：实测打开<select>、聚焦输入框、横竖屏切换三种操作；
   • Chrome/Edge + 表格边框与:hover粘滞：验证.table-bordered在空tbody、动态插入行时是否丢边框；
   • 所有浏览器 + 打印：检查定宽容器、浮动列与表格的打印输出，必要时套用.container { width: auto }的打印补丁。

3. 不要试图"修"框架：Bug 墙上列出的问题属于上游浏览器缺陷，代码层面只能规避（如模态框故意不用-webkit-overflow-scrolling: touch）。遇到疑似新缺陷时，先在 browser-bugs.yml 中检索是否已有记录，再决定是加 CSS 补丁还是向对应浏览器厂商提交 issue。

4. 跟踪上游进度：把 Bug 墙中的上游编号（如 WebKit#158342、Mozilla#1023761）作为检索关键词，定期核对厂商修复状态；一旦修复，可移除对应的规避代码（注意 v4 的源码注释里都标明了原始 Bug 链接，便于逐个清理）。

5. 警惕渲染残影类缺陷：Edge 的border-radius背景渗色、Chrome 的无限动画内存泄漏，意味着在 DOS 风格主题这种大量使用硬边框、纯色块与闪烁动画的视觉体系下，应避免将关键视觉元素建立在会被这些缺陷影响的绘制路径上（例如不要依赖margin-right: -1px合并边框的布局技巧）。

七、结语：从"撞 Bug"到"管理 Bug"

浏览器 Bug 墙表面上是缺陷清单，实质上是 Bootstrap 团队跨浏览器工程方法的缩影：先公开记录、再逐条归因到上游、最后在源码中留下带链接的规避注释。这套"文档-数据-代码"三层结构在 BOOTSTRA.386 仓库中被原样保留——从 browser-bugs.md 模板、browser-bugs.yml 数据、bugify.html 链接生成器，到 _modal.scss、_tables.scss、_print.scss 中的规避实现，构成了一条完整的可追溯链路。对使用 BOOTSTRA.386 的开发者而言，这既是排查跨浏览器怪象的第一手索引，也是学习"如何专业地管理浏览器兼容性债务"的范本。

• 前端
• UI组件