浏览器兼容性
Posted iriliguo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器兼容性相关的知识，希望对你有一定的参考价值。
今天写CSS 3D Transforms发现ie10以下都不支持，遂总结了下兼容性这个问题，那么最好的方法是什么呐，
当然是升级到最新浏览器辣........哈哈哈.......还在用老版本什么的太让人心塞~\(≧▽≦)/~啦啦啦
我们先看一下lt，lte，gt，gte分别表示什么 ：
lt：小于当前版本
lte：小于或等于当前版本，包括本身
gt：大于当前版本
gte：大于或等于当前版本，包括本身
在<body>里面加入下面这个啦，提醒用户升级浏览器哟：
<!--[if lt IE 10]> <div class="alert alert-danger" style="margin-bottom: 0">您正在使用 <strong>过时的</strong> 浏览器. 是时候 <a target="_blank" href="http://browsehappy.com/">更换一个更好的浏览器</a> 来提升用户体验.</div> <![endif]-->
或者：
<!--[if lt IE 10]>
<script type="text/javascript">
window.location.href=" http://browsehappy.com/";
</script>
<![endif]-->
如果要兼容呢，依旧条件注释法：
1.<meta http-equiv="x-ua-compatible" content="ie=7" /> 在head里面加入这个, ie8浏览器 就和ie7一模一样了。
2.htmlshiv.js/selectivizr.js
Remy的 HTML5shiv通过JavaScript 来创建HTML5元素(如 main, header, footer等)。在某种程度上通过JavaScript 创建的元素是 styleable(可样式)的。我们可以花很多时间来思考其运行原理，但谁会在乎呢?这种策略在所有产品网站上仍然是必须使用的。 代码如下: <!--[if lt IE 9]><script src="http://cdn.bootcss.com/html5shiv/3.7/html5shiv.js"></script><![endif]--> Selectivizr.js 是一个不可思议的资源，用于填充不支持的CSS选择器和属性,包括重要的 last-child。在最近的重设计中，我嵌入了 selectivizr，并在更老的 IE 浏览器上也不会错过任何细节。下面是我的实现代码: 代码如下: <!--[if lte IE 8]><script src="http://cdn.bootcss.com/selectivizr/1.0.2/selectivizr.js"></script><![endif]-->
3.根据不同的浏览器版本，载入不同的css
<!--[if IE 8]> <link rel="stylesheet" type="text/css" href="ie8.cdd"> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.cdd"> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.cdd"> <![endif]-->
4.下面这个是比较土的方法辣
<!DOCTYPE html> <!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]--> <!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--> 上面的方法是作用于css，来写一些针对IE各版本的样式差异。先判断用户用的哪个IE版本，然后在标签上加上该版本的class，这样可以方便hack。 然后我们在css文件中就可以这样写： .ie6 xxx {}; .ie7 xxx {};
注意：<!--[if IE]>只有IE6,7,8,9浏览器显示(IE10标准模式不支持)<![endif]-->
5.IE9以下的浏览器不支持HTML5标签，所以需要导入一个html5.js补丁，原理是通过JS来生成HTML5新标签对象。
本着移动优先的原则，现在写CSS都会用media query（响应式设计），IE8以下的浏览器不支持media query，这会导致@media 声明的CSS不能生效，因此要导入一个css3-mediaqueries.js补丁。
<!--[if lte IE 8]> <script src="/js/html5.js"></script> <script src="/js/css3-mediaqueries.js"></script> <link href="/css/ie8.css" rel="stylesheet" type="text/css"> <![endif]-->
6.IE11不支持条件注释，可以用正则表达式判断，比如下面这段代码是判断全部IE版本var browser = navigator.appName;
var ie11 = !!navigator.userAgent.match(/Trident\/7\./); if (browser == ‘Microsoft Internet Explorer‘ || ie11 == true) { //do something }
注意：
navigator.appName 可返回浏览器的名称
Javascript的window.navigator.userAgent.match()方法用于判断浏览器类型，
例如
window.navigator.userAgent.match(/MSIE
6/ig)
判断浏览器是否是IE 6
以上是关于浏览器兼容性的主要内容，如果未能解决你的问题，请参考以下文章