浏览器兼容性适配的一些方法

最近接到领导任务要把一个手机网站嵌入到pc端需要适配ie浏览器，用到了下面的一些方法

1、IE条件注释

<!--[if lt IE  9]>
<link rel="stylesheet" href="__PUBLIC__/patch/ie8style.css"/>
<![endif]-->

<!--[if IE]>
<script src="__PUBLIC__/patch/json2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="__PUBLIC__/patch/style.css"/>
<script src="__PUBLIC__/patch/hook.js" type="text/javascript" ></script>
<![endif]-->

以上代码的意思就是判断浏览器是否为ie、或者指定版本的ie加载对应资源，不过这种方法只能支持ie6、7、8、9不支持ie10、11

2、媒体查询器

其实ie10、11和手机浏览器已经很接近了基本上无需做再多的适配，不过我们的手机项目使用了一些flex布局，还好使用了flex框架frozenui，ie10和ie11也是支持flex布局的，只是对应的flex前缀不同

<link rel="stylesheet" href="__PUBLIC__/patch/ie10style.css"/>

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

我在页面中加入一个新的css 并写了一个媒体查询器、该媒体查询器只对ie10、11生效、把原来frozenui的代码复制进去，替换掉相关的flex前缀就完成了兼容

3、定位兼容

手机浏览器一般支持定位、而ie7、8不支持，所以写了个垫片

/*定位垫片*/
navigator.geolocation={}
navigator.geolocation.getCurrentPosition=function(a,b){
    b()
}

我这里是默认调用了定位失败的处理方法、也可以调用定位成功的处理方法自己写死一个经纬度

4、trim兼容

trim这个方法一般手机浏览器都是支持的，不过ie低版本浏览器不支持可以通过以下方法来支持，感谢js的原型模式如此灵活！

/*trim垫片*/
String.prototype.trim = function()
{
    return this.replace(/(^\s*)|(\s*$)/g, "");
}

5、inline兼容

ie7下面非inline元素设置为inline-block将会显示异常，兼容的时候只能是把这些元素浮动起来了，父层div里面再塞个div clear设置为both 让其撑开父框高度