566E
首页 包列表 提交包 常见问题 关于

定制 coliff/bootstrap-ie11 二次开发

按需修改功能、优化性能、对接业务系统，提供一站式技术支持

邮箱：yvsm@zunyunkeji.com | QQ：316430983 | 微信：yvsm316

coliff/bootstrap-ie11

Composer 安装命令：

composer require coliff/bootstrap-ie11

包简介

Bootstrap 5 for Internet Explorer 11

关键字：

#css #bootstrap #ie #polyfill #internet-explorer

README 文档

README

Bootstrap 5 for IE 11

Bootstrap 5 for IE 11

LICENSE: MIT GitHub Super-Linter GitHub stars image npm Version jsdelivr

Bootstrap 5 drops support for Internet Explorer 11, but you can add support back by simply adding a CSS file and a few JavaScript polyfills.

Quick start

  • Download the latest release
  • Clone the repository git clone https://github.com/coliff/bootstrap-ie11.git
  • Install with npm npm install bootstrap-ie11
  • Install with Yarn yarn add bootstrap-ie11
  • Install with Composer composer require coliff/bootstrap-ie11

Usage

Just add this in the <head> which will load the CSS and JS - just for IE users.

<script nomodule>window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/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>

If you'd prefer to load the bootstrap-ie11 CSS without JavaScript you could use an IE-only media query as follow:

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

The CSS can be loaded via a CDN:

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

Splitting the document.write Method

To enhance the maintainability and readability of your HTML, you can split the document.write method when adding Bootstrap 5 and necessary polyfills for Internet Explorer 11. Below is an example of how you can split the document.write method:

<script nomodule>
  window.MSInputMethodContext && document.documentMode &&
    document.write(
      '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.3.7/css/bootstrap-ie11.min.css">'
      + '<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"><\/script>'
      + '<script src="https://cdn.jsdelivr.net/npm/ie11-custom-properties@4.1.0"><\/script>'
      + '<script src="https://cdn.jsdelivr.net/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>

Getting local copies of dependencies

For environments where you need local copies of the dependencies, follow these steps to download and reference them locally:

  • Bootstrap CSS - download the .css and corresponding .map files
  • Bootstrap JS - download the .js and corresponding .map files
  • IE11 Custom Properties
  • Element QSA Scope
  • PolyFill - this seems to load dynamically based on what functionality the browser making the requests is missing, here's what I did as a workaround:
    1. Open IE11 or Edge in IE11 mode (search "IE mode" in Edge settings to find and enable)
    2. Copy/paste the URI in the src attribute of the <script> tag into the browser's URI bar and hit enter, the response will be whatever your app would receive
    3. Copy/paste the text on the page and save it to a new file, now you have a local copy

After downloading the dependencies, update your script to reference these local files:

<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>

Forcing IE11 Out of Compatibility Mode

If Internet Explorer is running in Compatibility Mode, it'll behave like an earlier version which could prevent bootstrap-ie11 from working properly. To ensure Internet Explorer 11 does not run your site in compatibility mode, add the following meta tag to your page:

<meta http-equiv="x-ua-compatible" content="ie=edge">

FAQS

What does this fix/polyfill?

  • Grid flexbug workaround
  • Workaround for the SVG overflow bug
  • Remove the default vertical scrollbar from textarea
  • Correct the text-wrapping and color inheritance for legend
  • Disable auto-hiding scrollbar to avoid overlap on pre
  • Fixes for card image size bug
  • Fixes for text color and text opacity utility classes
  • Improved layout for justify-content-evenly flex utility
  • Fixes for stacks gap spacing
  • Add the correct display values for template and main
  • Fixes for modals (.modal-dialog-centered and .modal-dialog-scrollable)
  • Fixes for forms (inputs, checkboxes, radio buttons, switches, selects, ranges, placeholders and floating labels)
  • Fix for the btn-close-white SVG icon color
  • Fix for dark carousel previous and next SVG icon colors
  • Fix for valid-tooltip & invalid-tooltip positioning
  • Adds vendor prefixes for user-select-auto and user-select-none utilities
  • Fix for .visually-hidden utility class
  • Fix for vertical rule .vr class
  • Bootstrap 5 Beta 2 is loaded via CDN (The JavaScript in Bootstrap 5 Beta 3 and later is incompatible)
  • Polyfill for CSS custom properties (ie11CustomProperties)
  • Polyfill to fix most JavaScript components (Polyfill)
  • Polyfill to fix tabs (element-qsa-scope polyfill)
  • Fixes for Accordion button icons
  • Fix for border utility classes

Known Issues

  • Internet Explorer 11 does not support vertical alignment of flex items when the flex container has a min-height. See Flexbugs #3 for more details.
  • The ie11CustomProperties polyfill currently removes the !important from any CSS variables with that set. See ie11CustomProperties issue #62.
  • SVG images with .img-fluid are sometimes disproportionately sized. To fix this, add width: 100%; or .w-100 where necessary. This fix improperly sizes other image formats, so this isn't applied automatically.
  • There is a slight delay before the ie11CustomProperties polyfill works its magic. Consider adding body{font-family:"Segoe UI", Arial, sans-serif;} to your IE11-only style sheet so there isn't a delay in the text displaying.
  • View a list of known issues at https://github.com/coliff/bootstrap-ie11/issues.
  • From Bootstrap 5.2 onwards, CSS custom properties are used extensively which can cause issues with the ie11CustomProperties polyfill.

Demo

See this in action at: https://coliff.github.io/bootstrap-ie11/tests/

Thanks

BrowserStack Logo

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers

coliff/bootstrap-ie11 适用场景与选型建议

coliff/bootstrap-ie11 是一款 基于 HTML 开发的 Composer 扩展包，目前已累计 786 次下载、GitHub Stars 达 97， 最近一次更新时间为 2020 年 12 月 17 日， 在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向： 「css」 「bootstrap」 「ie」 「polyfill」 「internet-explorer」 等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 coliff/bootstrap-ie11 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 coliff/bootstrap-ie11 我们能提供哪些服务？
定制开发 / 二次开发

基于 coliff/bootstrap-ie11 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 coliff/bootstrap-ie11 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

krakjoe/pthreads-polyfill 78

A polyfill for pthreads

nerds-and-company/css-to-inline-styles-twig-extension 3

A Twig extension to insert css as inline styles with a tag

odan/twig-assets 22

Caching and compression for Twig assets (JavaScript and CSS).

marc-mabe/enum-cl 7

Compatibility layer for emulating enumerations in PHP < 8.1 and native enumerations in PHP >= 8.1

ducks-project/apache 3

PHP polyfill for the Apache Functions. The aim is to provides functions as the PHP way in order to get them available even if PHP is not running as an Apache module.

zendtech/polyfill-mb-ereg 3

Polyfill for mb_ereg(), mb_eregi(), mb_ereg_match(), and mb_ereg_replace*() functions; primary use case is for mbstring on Windows 7.4+

统计信息

  • 总下载量： 786
  • 月度下载量： 0
  • 日度下载量： 0
  • 收藏数： 97
  • 点击次数： 15
  • 依赖项目数： 0
  • 推荐数： 0

GitHub 信息

  • Stars： 97
  • Watchers： 2
  • Forks： 14
  • 开发语言： HTML
访问仓库

其他信息

  • 授权协议： MIT
  • 更新时间： 2020-12-17