1 ie6.0横向margin
加倍
产生因素:块属性、float、有横向margin。
解决方法:display:inline;
2 ie6.0下默认有行高
解决方法:overflow:hidden;或font-size:0;或line-height:xx px;
3 在各个浏览器下img
有空隙(原因是:回车。)
解决方法:让图片浮动。
4 一个父标签与几个子标签嵌套,父标签不浮动,子标签float
,子标签不撑开父的高度。
解决方法:
a 在子标签最后清浮动{<div style="height:0;clear:both;"> </div>}
b 父标签添加{overflow:hidden;}
c 给父标签设置高度
5 Ie6下,不识别最大宽、高度和最小宽高度,意即min-width/height
和 Max-width/height
在ie6
中没效果,
解决方法:
(1):
.abc{border:1px blue solid;width:200px;height:200px;}
html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}
(2):
.abc{width:200px;height:200px;_width:200px;_height:200px;}
(因为ie6有一个特征,当定义一个高度时,如果内容超过高度,元素会自动调整高度。)
6 Ie6里面:如li
设宽、高,并且li
里面的标签浮动,那么li
之间会有间距
解决方法:li不设宽、高或者li内的标签不浮动
7 li之间有间距
解决方法:li 设置vertical-align:middle;
8 3像素问题:ie6下,当浮动元素与流动元素并列显示时,他们之间会存在三像素问题。
解决方法:用hack技术, 例如:所有浏览器通用 height:100px;
ie6专用_height:100px;
ie7专用*+height:100px;
ie6/ie7共用*height:100px;
9 当定义行内元素为包含框时,且包含框包含的绝对定位元素以百分比为单位进行定位时,会出现混乱。
解决方法:在行内元素里加入{zoom:1;}
10 当多个浮动元素中间夹杂着HTML
注释语句时,如果浮动元素宽度为100%,则在下一行多显示一个上一行最后一个字符。
解决办法:给浮动元素添加display:inline;。
11 opacity
定义元素的不透明度
filter:alpha(opacity=80);/*ie支持该属性*/
opacity:0.8;/*支持css3的浏览器*/
12 两个块元素,竖向的margin
值不增加,会重叠,其间距为最大margin
值。
13 优先级:被!important
注明的css
属性具有最高优先级(.abc{color:red !important;}
)。但在ie6中!important
具有一个bug:
在同一组css
属性中,!important
不起作用。
14 火狐不识别background-position-y
或background-position-x
;
---------------------------2014.01.10补充-------------------------------
15 ie6 不支持 fixed
/*对于非IE6可以这样写*/
#top{
position:fixed;
bottom:0;
right:20px;
}
/*但是IE6是不支持fixed定位的,需要另外重写*/
#top{
position:fixed;
_position:absolute;
top:0;
right:20px;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}
/*使用hack使IE6实现该效果,但这个东东会闪烁,需要以下代码*/
*html{
background-image:url(about:blank);
background-attachment:fixed;
}
/*使固定在顶部*/
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}
/*固定在底部*/
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));
}
/*垂直居中*/
#top{
position:fixed;
top:50%;
margin-top:-50px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));
}
16 解决 ie6 最大、最小宽高 hack
方法
/* 最小宽度 */
.min_width{
min-width:300px;
_width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}
/* 最大宽度 */
.max_width{
max-width:600px;
_width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}
/* 最小高度 */
.min_height{
min-height:200px;
_height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
}
/* 最大高度 */
.max_height{
max-height:400px;
_height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
}
17 z-index
不起作用的 bug
1)ie6下 首先讲讲第一种z-index
无论设置多高都不起作用情况。这种情况发生的条件有三个:
1、父标签position
属性为relative
;
2、问题标签含有浮动(float)属性。
2)所有浏览器:它只认第一个爸爸
层级的高低不仅要看自己,还要看自己的老爸这个后台是否够硬。用术语具体描述为:
父标签position
属性为relative
或absolute
时,子标签的absolute
属性是相对于父标签而言的。而在IE6下,层级的表现有时候不是看子标签的z-index
多高,而要看它们的父标签的z-index
谁高谁低。
18 ie各个版本hack
/*类内部hack:*/
.header {_width:100px;} /* IE6专用*/
.header {*+width:100px;} /* IE7专用*/
.header {*width:100px;} /* IE6、IE7共用*/
.header {width:100px\0;} /* IE8、IE9共用*/
.header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/
.header {width:330px\9\0;} /* IE9专用*/
/*选择器Hack:*/
*html .header{} /*IE6*/
*+html .header{} /*IE7*/
Ø JavaScript
-
HTML对象获取问题
-
const问题
-
event.x与event.y问题
-
window.location.href问题
-
frame问题
-
模态和非模态窗口问题
-
firefox与IE的父元素(parentElement)的区别
-
document.formName.item(”itemName”) 问题
-
集合类对象问题
-
自定义属性问题
-
input.type属性问题
-
event.srcElement问题
-
body载入问题
-
事件委托方法
-
Table操作问题
-
对象宽高赋值问题
Ø CSS
-
cursor:hand
VScursor:pointer
-
innerText
在IE中能正常工作,但在FireFox中却不行. -
CSS透明
-
css中的width和padding
-
FF和IE BOX模型解释不一致导致相差2px
-
IE5 和IE6的BOX解释不一致
-
ul和ol列表缩进问题
-
元素水平居中问题
-
Div的垂直居中问题
-
margin加倍的问题
-
IE与宽度和高度的问题
-
页面的最小宽度
-
DIV浮动IE文本产生3象素的bug
-
IE捉迷藏的问题
-
float的div闭合;清除浮动;自适应高度
-
高度不适应
-
IE6下图片下有空隙产生
-
对齐文本与文本输入框
-
LI中内容超过长度后以省略号显示
-
为什么web标准中IE无法设置滚动条颜色了
-
为什么无法定义1px左右高度的容器
-
链接(a标签)的边框与背景
-
超链接访问过后hover样式就不出现的问题
-
FORM标签
-
属性选择器(这个不能算是兼容,是隐藏css的一个bug)
-
为什么FF下文本无法撑开容器的高度
-
关于空格的解释
-
条件注释
-
强制渲染
-
js兼容文件
-
浏览器识别符
Ø JavaScript
HTML
对象获取问题
FireFox:document.getElementById("idName");
ie:document.idname或者document.getElementById("idName").
解决办法:统一使用document.getElementById("idName")
;
-
const
问题
说明:Firefox
下,可以使用const
关键字或var
关键字来定义常量;
IE
下,只能使用var
关键字来定义常量.
解决方法:统一使用var
关键字来定义常量. -
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
. -
window.location.href
问题
说明:IE或者Firefox2.0.x
下,可以使用window.location
或window.location.href;
Firefox1.5.x
下,只能使用window.location
.
解决方法:使用window.location
来代替window.location.href
. -
frame
问题
以下面的frame
为例:
<frame src="xxx.html" id="frameId" name="frameName" />
(1)访问frame
对象:
IE:使用window.frameId
或者window.frameName
来访问这个frame
对象. frameId
和frameName
可以同名。
Firefox:只能使用window.frameName
来访问这个frame
对象.
另外,在IE
和Firefox
中都可以使用window.document.getElementById("frameId")
来访问这个frame
对象.
(2)切换frame
内容:
在 IE和Firefox
中都可以使用window.document.getElementById("testFrame").src = "xxx.html"
或window.frameName.location = "xxx.html"
来切换frame
的内容.
如果需要将frame
中的参数传回父窗口(注意不是opener
,而是parent frame
),可以在frame
中使用parent
来访问父窗口。例如:parent.document.form1.filename.value="Aqing"
;
- 模态和非模态窗口问题
说明:IE
下,可以通过showModalDialog和showModelessDialog
打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)
方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener
来访问父窗口.
例如:
var parWin = window.opener;
parWin.document.getElementById("Aqing").value = "Aqing";
firefox
与IE的父元素(parentElement
)的区别
IE:obj.parentElement
firefox:obj.parentNode
解决方法: 因为firefox
与IE
都支持DOM
,因此使用obj.parentNode
是不错选择.
document.formName.item(”itemName”)
问题
问题说明:IE下,可以使用document.formName.item(”itemName”)
或document.formName.elements ["elementName"]
;Firefox 下,只能使用document.formName.elements["elementName"]
。
解决方法:统一使用document.formName.elements["elementName"]
。
-
集合类对象问题
问题说明:IE
下,可以使用()
或[]
获取集合类对象;Firefox下,只能使用[ ]
获取集合类对象。
解决方法:统一使用[]
获取集合类对象。 -
自定义属性问题
问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()
获取自定义属性;Firefox下,只能使用getAttribute()
获取自定义属性。
解决方法:统一通过getAttribute()
获取自定义属性。 -
input.type
属性问题
问题说明:IE下input.type
属性为只读;但是Firefox下input.type
属性为读写。
解决办法:不修改input.type
属性。如果必须要修改,可以先隐藏原来的input
,然后在同样的位置再插入一个新的input
元素。 -
event.srcElement
问题
问题说明:IE下,event
对象有srcElement
属性,但是没有target
属性;Firefox下,even
对象有target
属性,但是没有srcElement
属性。
解决方法:使用srcObj = event.srcElement ?event.srcElement : event.target
;
如果考虑第8条问题,就改用myEvent
代替event
即可。 -
body
载入问题
问题说明:Firefox的body
对象在body
标签没有被浏览器完全读入之前就存在;而IE的body
对象则必须在body
标签被浏览器完全读入之后才存在。
[注] 这个问题尚未实际验证,待验证后再来修改。
[注] 经验证,IE6、Opera9以及FireFox2中不存在上述问题,单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素,即使这个元素还没有载入完成。 -
事件委托方法
问题说明:IE下,使用document.body.onload = inject
; 其中function inject()
在这之前已被实现;在Firefox下,使用document.body.onload = inject()
;
解决方法:统一使用document.body.onload=new Function(’inject()’);
或者document.body.onload = function(){}
[注意]Function
和function
的区别。 -
Table
操作问题
问题说明:ie、firefox
以及其它浏览器对于table
标签的操作都各不相同,在ie中不允许对table
和tr的innerHTML
赋值,使用js增加一个tr时,使用appendChild
方法也不管用。
解决方法:
//向table追加一个空行:
var row = otable.insertRow(-1);var cell = document.createElement("td");cell.innerHTML = "";cell.className = "XXXX";row.appendChild(cell);
[注] 由于俺很少使用JS直接操作表格,这个问题没有遇见过。建议使用JS框架集来操作table,如JQuery。
- 对象宽高赋值问题
问题说明:FireFox中类似obj.style.height = imgObj.height
的语句无效。
Ø CSS
-
cursor:hand
VScursor:pointer
firefox不支持hand,但ie支持pointer
解决方法: 统一使用pointer -
innerText
在IE中能正常工作,但在FireFox中却不行.
需用textContent
。
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
-
CSS
透明
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
opacity 透明,子元素会继承透明属性。解决方式:1、使用 background:rgba(0,0,0,.6) //IE8及以下无效果。 2、使用定位,背景色与子元素处于同级关系。 -
css中的width和padding
在IE7和FF中width宽度不包括padding,在Ie6中包括padding. -
FF和IEBOX模型解释不一致导致相差2px
box.style{width:100;border 1px;}
ie理解为box.width = 100
ff理解为box.width = 100 + 1*2 = 102 //加上边框2px
解决方法:div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反, IE不能识别!important这个属性,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
-
IE5 和IE6的BOX解释不一致
IE5下div{width:300px;margin:0 10px 0 10px;}
div 的宽度会被解释为300px-10px(右填充)-10px(左填充),最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width :340px;margin:0 10px 0 10px}
-
ul
和ol
列表缩进问题
消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;
经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。 -
元素水平居中问题
FF: margin:0 auto;
IE: 父级{ text-align:center; }
-
Div
的垂直居中问题
vertical-align:middle;
将行距增加到和整个DIV一样高:line-height:200px;
然后插入文字,就垂直居中了。缺点是要控制内容不要换行。 -
margin
加倍的问题
设置为float
的div在ie下设置的margin
会加倍。这是一个ie6都存在的bug
。解决方案是在这个div
里面加上display:inline
;
例如:
<div id=”imfloat”>
相应的css为
#imfloat{
float:left;
margin:5px;
display:inline;}
- IE与宽度和高度的问题
IE不认得min-
这个定义,但实际上它把正常的width
和height
当作有min
的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width
和min-height
的话,IE
下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
- 页面的最小宽度
如上一个问题,IE不识别min
,要实现最小宽度,可用下面的方法:
#container{ min-width: 600px; width:expression(document.body.clientWidth< 600? "600px": "auto" );}
第一个min-width
是正常的;但第2行的width
使用了Javascript
,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
DIV
浮动IE文本产生3象素的bug
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px
的间距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>
- IE捉迷藏的问题
当div
应用复杂的时候每个栏中又有一些链接,DIV
等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout
使用line-height
属性或者给#layout
使用固定高和宽。页面结构尽量简单。
float
的div
闭合;清除浮动;自适应高度
① 例如:<div id=”floatA”><div id=”floatB”><div id=”NOTfloatC”>
这里的NOTfloatC
并不希望继续平移,而是希望往下排。(其中floatA、floatB
的属性已经设置为float:left;
)
这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC
并非float
标签,必须将float标签闭合。在<div class=”floatB”><div class=”NOTfloatC”>
之间加上<div class=”clear”>
这个div
一定要注意位置,而且必须与两个具有float
属性的div
同级,之间不能存在嵌套关系,否则会产生异常。并且将clear
这种样式定义为为如下即可:.clear{clear:both;}
②作为外部 wrapper
的 div
不要定死高度,为了让高度能自适应,要在wrapper
里面加上overflow:hidden
; 当包含float
的box
的时候,高度自适应在IE
下无效,这时候应该触发IE的layout
私有属性(万恶的IE啊!)用zoom:1
;可以做到,这样就达到了兼容。
例如某一个wrapper
如下定义:
.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}
③对于排版,我们用得最多的css描述可能就是float:left
.有的时候我们需要在n栏的float div
后面做一个统一的背景,譬如:
<div id=”page”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
比如我们要将page
的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right
的向下拉长,而page
居然保存高度不变,问题来了,原因在于page
不是float
属性,而我们的page
由于要居中,不能设置成float
,所以我们应该这样解决:
<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
</div>
再嵌入一个float left
而宽度是100%的DIV
解决之。
或者另一种方法:用选择器(:after
)在page
之后插入一个空标签,并清除浮动
.page:after { content: ""; display: table; clear: both; }
④万能float
闭合(非常重要!)
关于 clear float
的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS
中,给需要闭合的div
加上class="clearfix"
即可,屡试不爽。
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
.clearfix {display:block;}
或者这样设置:.hackbox{ display:table; //将对象作为块元素级的表格显示}
- 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin
或padding
时。
例:
#box { }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p对象中的内容</p>
</div>
解决技巧:在P对象上下各加2个空的div对象CSS代码{height:0px;overflow:hidden;}
或者为DIV加上border
属性。
-
IE6下图片下有空隙产生
解决这个BUG的技巧有很多,可以是改变html
的排版,或者设置img
为display:block
或者设置vertical-align
属性为vertical-align:top/bottom/middle/text-bottom
都可以解决. -
对齐文本与文本输入框
加上vertical-align:middle;
<style type="text/css">
<!--
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
-->
</style>
经验证,在IE下任一版本都不适用,而ff、opera、safari、chrome
均OK!
LI
中内容超过长度后以省略号显示
此技巧适用与IE、Opera、safari、chrome
浏览器,FF
暂不支持。
<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>
- 为什么web标准中IE无法设置滚动条颜色了
解决办法是将body
换成html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
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;
}
-->
</style>
- 为什么无法定义
1px
左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多:
例如:overflow:hidden zoom:0.08 line-height:1px
16.怎么样才能让层显示在FLASH
之上呢
解决的办法是给FLASH
设置透明
<param name="wmode" value="transparent" />
-
链接(a标签)的边框与背景
a链接加边框和背景色,需设置display: block
, 同时设置float: left
保证不换行。参照menubar, 给 a 和menubar设置高度是为了避免底边显示错位, 若不设 height, 可以在menubar中插入一个空格。 -
超链接访问过后
hover
样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
Code:
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
-
FORM
标签
这个标签在IE中,将会自动margin
一些边距,而在FF中margin
则是0
,因此,如果想显示一致,所以最好在css
中指定margin
和padding
,针对上面两个问题,我的css
中一般首先都使用这样的样式ul,form{margin:0;padding:0;}
。 -
属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}
div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]
中,所有p标签中有id的都是同样式的.
- 为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height
设置min-height:200px;
这里为了照顾不认识min-height
的IE6 可以这样定义:
{
height:auto!important;
height:200px;
min-height:200px;
}
-
IE和FireFox 对空格的尺寸解释不同,
FireFox
为4px,IE为8px;FireFox
对div与div之间的空格是忽略的,但是IE是处理的。因此在两个相邻div之间不要有空格跟回车,否则可能造成不同浏览间之间格式不正确,比如著名的3px偏差(多个img
标签连着,然后定义float: left;
结果在firefox
里面正常,而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。解决方法是在img
外面套li,并且对li定义margin: 0;
避免方式:在必要的时候不要无视list
标签)而且原因难以查明。 -
条件注释
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
lte – 小于等于
lt – 小于
gte – 大于等于
gt – 大于
! – 不等于
45.强制渲染
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7> //这句话的意思是强制使用IE7模式来解析网页代码!
<meta http-equiv=“X-UA-Compatible” content=“IE=8″>
<meta http-equiv=“X-UA-Compatible” content=“chrome=1″ /> //Google Chrome Frame也可以让IE用上Chrome的引擎
<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″><!– IE7 mode –> 或者 <meta http-equiv=“X-UA-Compatible” content=“IE=7″><!– IE7 mode –> //强制IE8使用IE7模式来解析
<meta http-equiv=“X-UA-Compatible” content=“IE=6″><!– IE6 mode –> <meta http-equiv=“X-UA-Compatible” content=“IE=5″><!– IE5 mode –> //强制IE8使用IE6或IE5模式来解析
<meta http-equiv=“X-UA-Compatible” content=“IE=5; IE=8″ /> //一个特定版本的IE支持所要求的兼容性模式多于一种
46.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]–>
- 浏览器识别符
p{ _color:red; } IE6 专用
*html p{ color:#red; } IE6 专用
p{ +color:red; } IE6,7 专用
p{ *color:red; } IE6,7 专用
*html p{ color:red; } IE6,7 专用
p{*+color: red;} IE7 专用
Body> p{ color: red; } 屏蔽 IE6
p{ color:red\9; } IE8
Firefox: -moz-
Safari: -webkit-
Opera: -o-
IE: -ms-