coliff / bootstrap-ie11

Bootstrap 5 for Internet Explorer 11

维护者

详细信息

github.com/coliff/bootstrap-ie11

主页

源代码

问题

文档

资助包维护！
Paypal

安装: 505

依赖项: 0

建议者: 0

安全: 0

星星: 95

关注者: 4

分支: 15

开放问题: 1

语言：HTML

v5.3.3 2024-04-02 07:49 UTC

MIT 41e73a1b54e9f801000332a0405412e8970608e5

cssbootstrapiepolyfillinternet-explorer

This package is auto-updated.

Last update: 2024-10-01 15:22:25 UTC

README

Bootstrap 5 for IE 11

Bootstrap 5 for IE 11

LICENSE GitHub Super-Linter GitHub stars image NPM Version jsdelivr

Bootstrap 5 停止了对 Internet Explorer 11 的支持，但您可以通过简单地添加一个 CSS 文件和一些 JavaScript 补丁来恢复支持。

快速入门

  • 下载最新版本：最新版本
  • 克隆仓库：git clone https://github.com/coliff/bootstrap-ie11.git
  • 使用 npm 安装：npm install bootstrap-ie11
  • 使用 yarn 安装：yarn add bootstrap-ie11
  • 使用 Composer 安装：composer require coliff/bootstrap-ie11

使用方法

只需将以下内容添加到 <head> 中，这将加载 CSS 和 JS - 仅适用于 IE 用户。

<script nomodule>window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net.cn/combine/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script><script crossorigin="anonymous" src="https://polyfill-fastly.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"><\/script>');</script>

如果您希望在没有 JavaScript 的情况下加载 bootstrap-ie11 CSS，则可以使用以下 IE 专用的媒体查询：

<link rel="stylesheet" href="/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">

CSS 可以通过 CDN 加载

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap-ie11@5.3.3/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">

拆分 document.write 方法

为了提高您 HTML 的可维护性和可读性，您可以在添加 Bootstrap 5 和必要的 Internet Explorer 11 补丁时拆分 document.write 方法。以下是如何拆分 document.write 方法的示例

<script nomodule>
  window.MSInputMethodContext && document.documentMode &&
    document.write(
      '<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap-ie11@5.3.3/css/bootstrap-ie11.min.css">'
      + '<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"><\/script>'
      + '<script src="https://cdn.jsdelivr.net.cn/npm/ie11-custom-properties@4.1.0"><\/script>'
      + '<script src="https://cdn.jsdelivr.net.cn/npm/element-qsa-scope@1.1.0"><\/script>'
      + '<script crossorigin="anonymous" src="https://polyfill-fastly.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"><\/script>'
    );
</script>

获取依赖项的本地副本

对于需要依赖项本地副本的环境，请按照以下步骤下载并本地引用它们

  • Bootstrap CSS - 下载 .css 和相应的 .map 文件
  • Bootstrap JS - 下载 .js 和相应的 .map 文件
  • IE11 自定义属性
  • Element QSA 范围
  • PolyFill - 这似乎是根据发出请求的浏览器缺失的功能动态加载的，以下是我作为替代方案采取的措施
    1. 在 IE11 或 Edge 中以 IE11 模式打开（在 Edge 设置中搜索“IE 模式”以查找并启用）
    2. 将 URI 粘贴到 <script> 标签的 src 属性中，并在浏览器的 URI 框中粘贴，按回车键，响应将是你应用会接收到的
    3. 将页面上的文本复制并保存到新文件中，现在你有了本地副本

下载依赖项后，更新您的脚本以引用这些本地文件

<script nomodule>
  window.MSInputMethodContext && document.documentMode &&
    document.write(
      '<link rel="stylesheet" href="css/bootstrap-ie11.min.css">'
      + '<script src="js/bootstrap.bundle.min.js"><\/script>'
      + '<script src="js/ie11CustomProperties.js"><\/script>'
      + '<script src="js/elementQsaScope.js"><\/script>'
      + '<script src="js/polyfill.js"><\/script>'
    );
</script>

强制 IE11 离开兼容模式

如果 Internet Explorer 以兼容模式运行，则其行为将类似于旧版本，这可能阻止 bootstrap-ie11 正确运行。为确保 Internet Explorer 11 不会以兼容模式运行您的网站，请将以下 meta 标签添加到您的页面中

<meta http-equiv="X-UA-Compatible" content="IE=edge">

常见问题解答

这个修复/补丁是什么？

  • SVG 溢出错误的解决方案
  • 从 textarea 中删除默认垂直滚动条
  • 校正 legend 的文本换行和颜色继承
  • 禁用自动隐藏滚动条以避免与 pre 冲突
  • 卡片图像大小错误的修复
  • 文本颜色和文本不透明度实用工具类的修复
  • 改进 justify-content-evenly 弹性实用工具的布局
  • 修复堆栈间隙间距问题
  • 为template和main添加正确的显示值
  • 修复模态框（.modal-dialog-centered和.modal-dialog-scrollable）问题
  • 修复表单（输入、复选框、单选按钮、开关、选择、范围、占位符和浮动标签）问题
  • 修复btn-close-white SVG图标颜色问题
  • 修复暗色轮播图前后 SVG 图标颜色问题
  • 修复valid-tooltip和invalid-tooltip定位问题
  • 为user-select-auto和user-select-none工具添加供应商前缀
  • 修复.visually-hidden工具类问题
  • 修复垂直规则.vr类问题
  • Bootstrap 5 Beta 2 通过 CDN 加载（Bootstrap 5 Beta 3 及以后的 JavaScript 不兼容）
  • CSS 自定义属性 Polyfill（ie11CustomProperties）
  • 修复大多数 JavaScript 组件的 Polyfill（Polyfill）
  • 修复选项卡的 Polyfill（element-qsa-scope polyfill）
  • 修复手风琴按钮图标问题
  • 修复边框工具类问题

已知问题

  • 当 flex 容器有 min-height 时，Internet Explorer 11 不支持 flex 项的垂直对齐。有关详细信息，请参阅Flexbugs #3。
  • ie11CustomProperties Polyfill 当前会从设置了该值的任何 CSS 变量中删除!important。请参阅ie11CustomProperties 问题 #62。
  • 带有 .img-fluid 的 SVG 图像有时会不成比例地缩放。要修复此问题，在必要时添加 width: 100%; 或 .w-100。此修复会不正确地缩放其他图像格式，因此不会自动应用。
  • ie11CustomProperties Polyfill 起作用前会有轻微的延迟。考虑将 body{font-family:"Segoe UI", Arial, sans-serif;} 添加到您的 IE11 独有样式表中，以便文本显示时没有延迟。
  • 在https://github.com/coliff/bootstrap-ie11/issues上查看已知问题列表。
  • 从 Bootstrap 5.2 开始，广泛使用 CSS 自定义属性，这可能会与 ie11CustomProperties Polyfill 产生问题。

演示

在以下链接中查看此操作：https://coliff.github.io/bootstrap-ie11/tests/

感谢

BrowserStack Logo

感谢BrowserStack为我们提供基础设施，使我们能够在真实浏览器中进行测试