低版本浏览器（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 经过测试并支持的浏览器平台：
- Chrome 26+
- Firefox 4+
- Safari 5+
- Opera 12+
- Internet Explorer 8+ (IE8 有 ES3 的限制；IE7 应该也可以使用，但未进行测试)
- Edge
- Android Browser 2.3+
- iOS Safari 5.1+
- PhantomJS 1.9+
- 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：
- HOME： https://jquery.com/
- Github： https://github.com/jquery/jquery
- CDN： https://www.bootcdn.cn/jquery/
使用示例：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 的部分渲染效果，如圆角、盒阴影、边框图像、多背景图像、渐变背景等：
- HOME： http://css3pie.com/
- Github： https://github.com/lojjic/PIE
- CDN： https://www.bootcdn.cn/css3pie/
使用示例：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>
优化建议
- 如果页面为 jsp，建议使用
head自定义标签，在自定义标签的代码中判断浏览器类型，按需引入相关脚本及代码，以减少页面的冗余代码； - 建议将做兼容处理的多个脚本拼接组合到同一个 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 名。
- 中文网站：http://modernizr.cn/
- 官方网站： https://modernizr.com/
- Github： https://github.com/Modernizr/Modernizr
本文转自 https://zixizixi.cn/low-version-browser-page-compatibility，如有侵权，请联系删除。