总结:兼容IE8的一些小问题(持续更新中…)

最近做了一个小项目,实现了对IE8的兼容,这里总结了一些新手可能遇到关于兼容性的小问题,并给出了相应的解决方案。后面遇到相关问题会回来持续更新。

1.解决IE6/IE7/IE8不兼容HTML5语义化标签的方法

IE8及以下版本的游览器对HTML5的语义化标签并不支持,为了使用HTML5语义化标签实现清晰的web页面布局,并且更方便SEO的优化,可以使用JS处理让IE6/7/8支持HTML5相关标签。

这里推荐使用Google的html5shiv包,代码如下:(由于相关原因Google的服务器不是很稳定,建议下载下来放到自己的服务器上)

1
2
3

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

百度公共库中html5shiv的地址:

1
2
3

<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

注意:使用之前要初始化新标签的CSS,因为新添加的标签在默认情况下表现为内联元素,需要我们利用CSS手动把它们转为块状元素方便布局。

1
2
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu {display:block}

链接:查看更多方法及详细介绍

2.不支持 input 的 placeholder 属性

placeholder属性是 HTML5 中的新属性,提供可描述输入字段预期值的提示信息,该提示会在输入字段为空时显示,并会在字段获得焦点时消失,IE8及以下版本游览器对该属性并不支持。
使用以下JS代码可以完美解决placeholder在IE8中的兼容问题,同时在CSS中为对应的 input 元素添加类名为placeholder的样式可以手动修改提示文字的显示效果(如:使用灰颜色字等),并且不会影响输入文字的效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
if( !('placeholder' in document.createElement('input')) ){  
$('input[placeholder],textarea[placeholder]').each(function(){
var that = $(this),
text= that.attr('placeholder');
if(that.val()===""){
that.val(text).addClass('placeholder');
}
that.focus(function(){
if(that.val()===text){
that.val("").removeClass('placeholder');
}
})
.blur(function(){
if(that.val()===""){
that.val(text).addClass('placeholder');
}
})
.closest('form').submit(function(){
if(that.val() === text){
that.val('');
}
});
});

3.对RGBA色彩模式不支持的平稳退化方案

RGBA色彩模式为CSS3的颜色表示方式,在RGB模式上新增了Alpha透明度,可以轻松制作出半透明的颜色效果,IE8及以下版本游览器对该方式并不支持。
这里使用比较简单的平稳退化方案,即先声明对IE支持的色彩方式,再为高级游览器声明带有透明度的颜色,不支持该色彩模式的游览器会自动忽略该代码,以达到高级游览器显示正确颜色,低版本游览器显示近似颜色的方案。如下例:

1
2
background-color: #582877;
background-color: rgba(0,0,0,0.5);

链接:让IE浏览器支持RGBA颜色的方案

4.Bootstrap对IE8的支持情况

Internet Explorer 8 和 9 是被支持的,然而,你要知道,很多 CSS3 属性和 HTML5 元素 – 例如,圆角矩形和投影 – 是肯定不被支持的。另外, Internet Explorer 8 需要 Respond.js 配合才能实现对媒体查询(media query)的支持。
Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下,建议将如下标签加入到你的页面中:

1
<meta http-equiv="X-UA-Compatible" content="IE=edge">

链接:查看更多Bootstrap对IE8的支持情况

5.jQuery对IE的支持情况

从 jQuery 2.0 起,jQuery 将只支持 IE 9+ 及其他支持 HTML5 浏览器,因此,如果需要兼容IE6/7/8游览器,可以选择使用 jQuery 1.x 版本(最新版本为jQuery 1.9)。
链接:jQuery对于游览器的支持情况