兼容性 | Gary's blog

问题好多啊！

兼容性是前端开发不可避免的问题，而且每个公司对此都会有要求，为此，我今天打算花点时间深入了解这个问题。

js兼容文件

//使IE5,IE6兼容到IE7模式
<!–-[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
<![endif]–->

//使IE5,IE6,IE7兼容到IE8模式
<!–-[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
<![endif]–->

//使IE5,IE6,IE7,IE8兼容到IE9模式
<!–-[if lt IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]–->

强制渲染

主要格式

1	<meta http-equiv="X-UA-Compatible" content="某种模式">

例子：

//强制使用IE7模式来解析网页代码！
<meta http-equiv=X-UA-Compatible content="IE=EmulateIE7">   

//Google Chrome Frame也可以让IE用上Chrome的引擎
<meta http-equiv=“X-UA-Compatible” content=“chrome=1″ />    

//强制使用IE7模式来解析
<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″>
<meta http-equiv=“X-UA-Compatible” content=“IE=7″><!– IE7 mode –>       

//强制使用IE6或IE5模式来解析
<meta http-equiv=“X-UA-Compatible” content=“IE=6″><!– IE6 mode –>   
<meta http-equiv=“X-UA-Compatible” content=“IE=5″>  

//一个特定版本的IE支持所要求的兼容性模式多于一种
<meta http-equiv=“X-UA-Compatible” content=“IE=5; IE=8″ />

条件注释

可以根据不同的条件注释，引入不同的代码

//例子
<!--[if IE 7]>
引入代码
<![endif]-->

一些判断符号：
lte – 小于等于
lt – 小于
gte – 大于等于
gt – 大于
! – 不等于

超链接访问过后hover样式就不出现

被点击访问过的超链接样式不在具有hover和active了,解决技巧是改变CSS属性的排列顺序: L-V-H-A

<style type="text/css">
a:link {} 
a:visited {} 
a:hover {} 
a:active {} 
</style>

web标准中IE无法设置滚动条颜色

解决办法将body换成html

html { 
scrollbar-face-color:#f6f6f6; 
scrollbar-highlight-color:#fff; 
scrollbar-shadow-color:#eeeeee; 
scrollbar-3dlight-color:#eeeeee; 
scrollbar-arrow-color:#000; 
scrollbar-track-color:#fff; 
scrollbar-darkshadow-color:#fff; 
}

li中内容超过长度后以省略号显示

此技巧适用与IE、Opera、safari、chrom浏览器，FF暂不支持

li { 
width:200px; 
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden; 
}

清除浮动

我一般使用的是

.clearfix:after { 
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; }

IE不识别min

如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
解决

#box{ 
    width: 80px; 
    height: 35px;}
html>body #box{ 
    width: auto; 
    height: auto; 
    min-width: 80px; 
    min-height: 35px;}

或使用js

1 2	#container{ min-width: 600px; width:expression(document.body.clientWidth < 600 ? "600px" : "auto" );}

还有通用写法

#container {
	background:#ccc;
	min-height:100px;
	height:auto !important;
	height:100px;
	overflow:visible;}

经典的双边距bug

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

#imfloat{ 
    float:left; 
    margin:5px; 
    display:inline;}

盒模型

浏览器识别符

Firefox: -moz-
Safari: -webkit-
Opera: -o-
IE: -ms-

css hack

css hack可以另起一章了。

css透明

filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); //IE6

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

opacity:0.6; //通用

opacity 透明，子元素会继承透明属性。解决方式：1、使用 background:rgba(0,0,0,.6) //IE8及以下无效果。 2、使用定位，背景色与子元素处于同级关系。

pointer

cursor:hand和cursor:pointer
firefox不支持hand，但ie支持pointer
解决方法:统一使用pointer

事件委托方法

问题说明：
IE下，使用document.body.onload = inject; 其中function inject()在这之前已被实现；
在Firefox下，使用document.body.onload = inject();
解决方法：
统一使用document.body.onload=new Function(’inject()’); 或者document.body.onload = function(){}

event.srcElement问题

问题说明：
IE下，even对象有srcElement属性，但是没有target属性；
Firefox下，even对象有target属性，但是没有srcElement属性。
解决方法：
使用

1	srcObj = event.srcElement ? event.srcElement : event.target;

集合类对象问题

问题说明：IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ]获取集合类对象。
解决方法：统一使用 [] 获取集合类对象。

firefox与IE的父元素(parentElement)的区别

IE：obj.parentElement
firefox：obj.parentNode
解决方法:因为firefox与IE都支持DOM,因此使用obj.parentNode。

event.x与event.y问题

问题说明:
IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法：
使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

const问题

问题说明:
Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.
解决方法：
统一使用var关键字来定义常量.

HTML对象获取问题

FireFox：document.getElementById(“idName”);
ie:document.idname或者document.getElementById(“idName”).
解决办法：
统一使用document.getElementById(“idName”);

做个小总结：可以看出，很多firefox支持的，ie也支持，但反过来则不然，所以我们只要尽量遵守firefox的规则，到了真正遇到ie不支持时，我们对其进行判断是ie的属性还是firefox的属性，然后将它们其中之一赋给一个变量，然后调用这个变量即可。