子兮子兮 子兮子兮

No can, but will.

目录
低版本浏览器(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-8Opera 12.1xSafari 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.jsselectivizr.jsPIE 处理:

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.jsrespond.min.jsselectivizr-min.jsPIE_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 国际许可协议进行许可。
本文发布于 子兮子兮 博客,欢迎转载,但未经作者同意请保留此声明,并在文章页面明显位置给出原文连接。