概述
IE兼容性一般主要是两个问题引起的:一、代码只支持高版本IE不支持低版本IE 二、代码只支持低版本IE不支持高版本IE(这个比较少但也存在,主要是一些老的系统)。
常规解决方法
通过在jsp页面增加meta的方式来实现兼容。
兼容高版本IE
如果系统只支持低版本的IE,但是用户的电脑的IE版本比较高,可以限定浏览器对文档的解析到某一特定版本,或者将浏览器限定到一些旧版本的表现中。可以用如下的方式:
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >
兼容低版本IE
系统兼容低版本IE比较困难,能做到的是指定浏览器按照最高的标准模式解析页面。主要是用来解决有些用户的电脑明明用的是IE8、IE9,但是确实用的IE7的文档模式。
<meta http-equiv="x-ua-compatible" content="IE=edge" >
通过IE嵌入谷歌插件
如果用户的电脑确实比较老,也不方便安装高版本的IE,通过常规的解决方法无法解决兼容性问题的话,可以通过嵌入谷歌插件(Google Chrome Frame),这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。需要注意的是谷歌已在2014年停止对此插件的更新,此插件的离线版本网上非常多,但是很多都用不了,博主也是找了好久才找到一个能用到。
二、常见的兼容问题
1、select选择框下的display设置为none时无法隐藏
这个问题可以用js解决,需要option的时候用js添加进去
2、标签得闭合,要有结束标签
IE8不支持以便签斜杠直接结尾。
页面错位,可能是标签少结束符。
3、last-child
first-child是CSS2的内容,但是last-child不是,所以IE8不行。
推荐的解决方法不是使用last-child,而是给最后一个元素设置一个.last的class,然后对此进行样式设置,这样就全部兼容了。
4、img
有边框并且有颜色,边框会占位置
解决方法:img{border:none}
5、background
#fff url() no-repeat 0/center
注意:颜色一定在最前面,属性间有空格。
6、不兼容placeholder
使用js插件:jquery.placeholder.js
https://github.com/mathiasbynens/jquery-placeholder
7、不兼容text-overflow
overflow: hidden;
white-space: nowrap;
这两个属性让起溢出隐藏和不换行,然后IE8用的时候记得不要加
word-berak:break-all;
word-wrap:break-word;
这样断开了,在IE8里面是不会变成省略号的
(但是在IE6/7/FF/Chrome都没有问题),其实都单行省略了,本来也没有必要断词
所以一般标准组合就是:
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis; /* for Opera */
text-overflow: ellipsis; /* for IE */
8、不兼容line-height
line-height:32px;
line-height: 32px\9; /*IE8*/
*line-height: 32px; /* IE7支持 */
_line-height: 32px; /* IE6支持 */
-ms-line-height: 32px;/*IE9+支持*/
-webkit-line-height:32px; /*chrome safair*/
-moz-line-height: 32px;/*火狐*/
9、不兼容transform
使用filter的Matrix(矩阵)
10、不兼容border-radius
推荐用背景图代替
11、ie8不兼容HTML5新标签
HTML5的新标签元素有:
<header>定义页面或区段的头部;
<footer>定义页面或区段的尾部;
<nav>定义页面或区段的导航区域;
<section>页面的逻辑区域或内容组合;
<article>定义正文或一篇完整的内容;
<aside>定义补充或相关内容;