子兮子兮 子兮子兮

子兮子兮风兮寒，三江七泽情洄沿。

目录
低版本浏览器（IE6+）页面兼容性问题相关处理
/        

低版本浏览器（IE6+）页面兼容性问题相关处理

页面渲染问题处理

在页面 <head> 标签中添加以下 <meta> 标签，控制多核浏览器优先使用 webkit 内核渲染页面：

<!-- 国产双核浏览器，如 QQ、360 等 -->
<meta name="renderer" content="webkit" />
<!-- 其他双核浏览器 -->
<meta name="force-rendering" content="webkit" />
<!-- 如果 IE 浏览器安装了 Google Chrome Frame 插件，则强制使用 Chromium 内核，否则使用本机支持的最高版本的 IE 内核 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- viewport-fit=cover 用来处理 iOS 刘海屏显示白边问题，使页面占满整个屏幕 -->
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">

JavaScript 兼容问题处理

core-js 库可以用来处理低版本浏览器不支持某些新的 JS 方法的问题，比如可以处理 IE 浏览器不支持字符串的 startsWith() 方法和数组的 indexOf() 方法的问题：

core-js 经过测试并支持的浏览器平台：

  1. Chrome 26+
  2. Firefox 4+
  3. Safari 5+
  4. Opera 12+
  5. Internet Explorer 8+ (IE8 有 ES3 的限制；IE7 应该也可以使用，但未进行测试)
  6. Edge
  7. Android Browser 2.3+
  8. iOS Safari 5.1+
  9. PhantomJS 1.9+
  10. NodeJS 0.8+

使用示例：core-js

<script src="https://cdn.bootcss.com/core-js/2.6.9/shim.min.js"></script>

jQuery 兼容问题处理

如果需要支持一些老的浏览器，比如 IE 6-8、Opera 12.1x 或 Safari 5.1+，那么应该使用 jQuery 1.12：

使用示例：jquery

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

HTML5 兼容问题处理

低版本 IE 不支持 HTML5 可以用 html5shiv.js 处理：

使用示例：html5shiv.js

<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
  • 注：html5shiv-printshiv.js 包括 html5shiv.js 中的所有内容，以及允许 HTML5 元素在 IE 6-8 中打印时设置样式并包含子项，所以如果用到网页打印及打印样式，则建议使用 html5shiv-printshiv.js。

CSS3 兼容问题处理

低版本 IE 不支持 CSS3 可以用 respond.js、selectivizr.js 和 PIE 处理：

respond.js

respond.js 用于在不支持 CSS3 媒体查询（@media）的浏览器中启用响应式网页设计，特别是 IE8 及以下版本：

使用示例：respond.js

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

css3-mediaqueries.js

css3-mediaqueries.js 相对于仅支持 max-width 媒体查询的 respond.js，支持更多的 CSS3 媒体查询语法，可根据实际情况二选一。

使用示例：css3-mediaqueries.js

<script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.min.js"></script>

selectivizr.js

selectivizr.js 提供了大量的低版本 IE 浏览器不支持的 CSS3 伪类和属性选择器（依赖 jQuery 或其他 JS 库）：

使用示例：selectivizr.js

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/selectivizr/1.0.2/selectivizr-min.js"></script>

PIE

PIE 可使 IE6-8 支持 CSS3 的部分渲染效果，如圆角、盒阴影、边框图像、多背景图像、渐变背景等：

使用示例：PIE

<script src="https://cdn.bootcss.com/css3pie/2.0beta1/PIE_IE678.js"></script>

使用 PIE 需要调用 PIE.attach() 方法，将所有需要按 CSS3 进行渲染的选择器名称添加到 PIE 对象：

$(function() {
  $(".example_css3_class").each(function() {
    PIE.attach(this);
  });
});

完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>浏览器页面兼容问题处理示例</title>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit" />
  <meta name="force-rendering" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <!--[if IE]>
    <script src="https://cdn.bootcss.com/core-js/2.6.9/shim.min.js"></script>
  <![endif]-->
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <!--[if (gte IE 6)&(lte IE 8)]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>

    <script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.min.js"></script>
    <script src="https://cdn.bootcss.com/selectivizr/1.0.2/selectivizr-min.js"></script>
    <script src="https://cdn.bootcss.com/css3pie/2.0beta1/PIE_IE678.js"></script>
  <![endif]-->
  <!--[if IE 9]>
    <script src="https://cdn.bootcss.com/css3pie/2.0beta1/PIE_IE9.js"></script>
  <![endif]-->

  <!--[if (gte IE 6)&(lte IE 9)]>
    <script>
      $(function() {
        $(".example_css3_class").each(function() {
          PIE.attach(this);
        });
      });
    </script>
  <![endif]-->
</head>
<body>
Hello World! F**K IE.
</body>
</html>

优化建议

  1. 如果页面为 JSP，建议使用 head 自定义标签，在自定义标签的代码中判断浏览器类型，按需引入相关脚本及代码，以减少页面的冗余代码；
  2. 建议将做兼容处理的多个脚本拼接组合到同一个 JS 文件中一次性加载，以减少网络连接，加快客户端响应。比如，创建一个名为 ie678.js 的文件，将 html5shiv-printshiv.min.js、respond.min.js、selectivizr-min.js 和 PIE_IE678.js 脚本中的内容依次复制到此文件中并保存，然后使用以下代码引用即可：
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script src="https://demo.example.com/ie678.js"></script>

  <script>
    $(function() {
      $(".example_css3_class").each(function() {
        PIE.attach(this);
      });
    });
  </script>
<![endif]-->

其他

Modernizr

2019年9月26日 更新：

Modernizr 是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。

功能：

Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。

原理：

Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。

文章：低版本浏览器（IE6+）页面兼容性问题相关处理作者：iTanken
链接：https://zixizixi.cn/low-version-browser-page-compatibility
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。
本文发布于 子兮子兮 博客，欢迎转载，但未经作者同意请保留此声明，并在文章页面明显位置给出原文连接。