首页 > 代码库 > 浏览器兼容性

浏览器兼容性

2024-09-10 22:17:20   215人阅读

今天写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://www.mamicode.com/"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://www.mamicode.com/"http://cdn.bootcss.com/selectivizr/1.0.2/selectivizr.js"></script><![endif]-->

3.根据不同的浏览器版本，载入不同的css 

<!--[if IE 8]> 
<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"ie8.cdd"> 
<![endif]--> 
<!--[if IE 7]> 
<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"ie7.cdd"> 
<![endif]--> 
<!--[if IE 6]> 
<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"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=http://www.mamicode.com/"/js/html5.js"></script>
        <script src=http://www.mamicode.com/"/js/css3-mediaqueries.js"></script>
        <link href=http://www.mamicode.com/"/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

 

浏览器兼容性


联系
我们