浏览器兼容

最新推荐文章于 2025-06-04 16:35:52 发布

慕容雪cly

最新推荐文章于 2025-06-04 16:35:52 发布

阅读量320

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端开发

本文链接：https://blog.youkuaiyun.com/cly153239/article/details/46892087

web前端开发专栏收录该内容

24 篇文章

订阅专栏

最近花了2天时间做浏览器的兼容，主要实现了谷歌，火狐，qq，百度，360以及ie7以上的浏览器兼容。在做该浏览器兼容的时候真正做到吐的是在ie方面的兼容，ie9以上是兼容html5+css3，ie9以下则不兼容。为了ie9以下的版本也能够兼容html5则在其<head></head>之间写入了 该html5.js插件能够当浏览器不兼容html5时，会自动为我们创建html5的新标签如：header，footer，section等。ie8以下不支持background-size的css特性，在ie9以上设置一个背景图片并通过background-size调整了背景图片的尺寸大小，但在ie8下却不支持，显示混乱。后来上网知道ie7，ie8可以通过滤镜在css中添加以下代码可实现

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg', sizingMethod='scale');

但我试了后发现没反应，于是又使用了另一种方式，放弃了背景图片的设置，而直接用了img的插入，通过position：absolute以及z-index：-1的设置实现了背景图的效果如：

<div id="web_bg" style="position:absolute;width:120%;float:left;margin-left:-10%; height:105%; z-index:-1">
<img src="image/xcfl.jpg" height="100%" width="100%" />
</div>但这在ie8中是实现了，但ie7又没实现，后来将其父节点设置为position相对的，并将要显示在图片上的文字设置为绝对的，这总算是在ie7中实现了背景图效果。

在纯html文本中为了与后台进行数据的交互，我一般都是通过jquery 的ajax并以json形式与后台进行数据的交互，但这在谷歌，火狐上能够成功发出请求并进入success的方法中，但在ie浏览器中却不能发出请求并成功进入success的方法之中，一开始以为ie不支持jquery 的ajax，结果发现是支持的，后来也根据网友们所诉的可能是由于ie的缓存于是在发送请求时在数据传输中加了个时间戳，并在ajax请求参数设置中加了个cache：false的属性，结果发现还是失败，最后才发现好像是ie的跨域请求安全问题于是在ajax请求前加入了一行代码jQuery.support.cors = true;结果还真成了。

在做360浏览器的兼容时，由于现在的360是双核内核，有ie+chrome于是在头文件中加入了以下代码：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">强制其使用最新的ie版本模式，并以谷歌形式渲染仍以ie外观显示。

最后想说明的一点是字体大小的设置在ie9以下是不识别rem以及em最好设置用px