IE浏览器的兼容性问题
对于前端来说,最讨厌的应该是调试IE,对于CSS3的属性,有得就不支持,比如
border-radius 圆角
box-shadow 块阴影
border-image 图片边框
multiple background images 多背景
linear-gradient as background image 线性渐变背景图片
解决方法:CSS3 PIE插件,在CSS文件中引入ie-css3.htc时 ,.htc 大概是浏览器补丁模式
这里是插件的下载地址:http://css3pie.com/download/
使用方式:
#test {
border-radius: 3px;
behavior: url(PIE.htc); //css 中使用 behavior 来加载即可自动实现效果,最好使用绝对路径
}
JS的解决方式
<!--在head中引入js-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/PIE.js"></script>
(function($){
$.pie = function(name, v){
// 如果没有加载 PIE 则直接终止
if (! PIE) return false;
// 是否 jQuery 对象或者选择器名称
var obj = typeof name == 'object' ? name : $(name);
// 指定运行插件的 IE 浏览器版本
var version = 9;
// 未指定则默认使用 ie10 以下全兼容模式
if (typeof v != 'number' && v < 9) {
version = v;
}
// 可对指定的多个 jQuery 对象进行样式兼容
if ($.browser.msie && obj.size() > 0) { //1.9以上版本jq不支持$.browser.msie方法
if ($.browser.version*1 <= version*1) {
obj.each(function(){
PIE.attach(this);
});
}
}
}
})(jQuery);
$(function(){
$.pie('.for-ie6', 6);
var objs = $('.for-ie, .test, .test1, .test2 .test3, #test4');
$.pie(objs, 9);
});