前端兼容性IE8相关问题

1.透明度      

 filter: alpha(opacity=40); //IE

2.ie8不识别HTML5标签：

head标签里面加入下面代码：<script src="js/html5.js"></script>

同时css加入：header,nav,article,section,aside,footer{display:block;}

html5.js下载地址：http://pan.baidu.com/s/1miR4ZOW

3.border-radius、box-shadow、text-shadow
用法：

  border-radius: 15px; 

  behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */

  ie-css3.htc下载地址：http://pan.baidu.com/s/1pLQcU5H

注意：

（1）只能同时4角圆角，不能单独设置；

（2）div上可以正常使用，测试text文本框，会出现异常；

（3）CSS文件要和页面在同一目录下，否则无效

（4）当前元素一定要有定位属性，像是position:relative或是position:absolute属性。

（5）z-index值一定要比周围元素的要高。

4.placeholder不显示方案：

if(!placeholderSupport()){ //浏览器是否兼容placeholder
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
};
function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}

5.nth-of-type()和nth-child()兼容问题：

使用nth-of-type:

ul li:nth-of-type(2) {
color: #fff;
}

IE8解决：

ul li+li {
color: #fff;
}

jquery引用2.0以下版本。

设置img的border为0。

推荐一个兼容IE的轮播图插件：SuperSlide。

。uperSlideSuperSlide