html5shiv.js主要功能:
html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。
respond.min.js主要功能:
respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
条件判断如下:
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
PIE.js 和 PIE.htc
官方网站:http://css3pie.com/
演示地址:http://css3pie.com/demos/gradient-patterns/
主要功能:
1.兼容border-radius;
2.阴影效果;
3.部分 CSS3 的效果,如 多张背景图,border-image,背景颜色渐变效果;
4.png 图片透明效果;
PIE.htc使用方法:
#test {
border-radius: 3px;
behavior: url(/PIE.htc);
}
PIE.js使用方法:
<script type="text/javascript" src="/PIE.js"></script>
<script type="text/javascript">
PIE.attach(document.getElementById("test"));
</script>
配合 jQuery 使用
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/PIE.js"></script>
<script type="text/javascript">
(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) {
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);
});
</script>