最全的CSS浏览器兼容问题整理(IE6.0、IE7.0与FireFox)(收藏)

放到 标签下，然后为div指定⼀个类, 然后CSS这样设计：

#container{ min-width: 600px; width:expression(Width < 600? "600px": "auto" );}

第⼀个min-width是正常的；但第2⾏的width使⽤了Javascript，这只有IE才认得，这也会让你的HTML⽂ 档不太正规。它实际上通过Javascript的判断来实现最⼩宽度。

浮动IE⽂本产⽣3象素的bug

左边对象浮动，右边采⽤外补丁的左边距来定位，右边对象内的⽂本会离左边有3px的间距.

#box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

*html #left{ margin-right:-3px; //这句是关键}

捉迷藏的问题

当div应⽤复杂的时候每个栏中⼜有⼀些链接，DIV等这个时候容易发⽣捉迷藏的问题。

有些内容显⽰不出来，当⿏标选择这个区域是 发现内容确实在页⾯。 解决办法：对#layout使⽤line-height属性 或者给#layout使⽤固定⾼和宽。页⾯结构尽量简单。

的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”>之间加上 < #divclass=”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后⾯做⼀个统⼀的背景,譬如:

⽐ 如我们要将page的背景设置成蓝⾊,以达到所有三栏的背景颜⾊是蓝⾊的⽬的,但是我们会发现随着left center right的向下拉长,⽽ page居然保存⾼度不变,问题来了,原因在于page不是float属性,⽽我们的page由于要居中,不能设置成float,所以我们应该这样解 决

再 嵌⼊⼀个float left⽽宽度是100%的DIV解决之

④万能float 闭合(⾮常重要!)

关 于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下 代码加⼊Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

/* Clear Fix */

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

.clearfix { display:inline-block; }

/* Hide from IE Mac */

.clearfix {display:block;}

/* End hide from IE Mac */

/* end of clearfix */

或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显⽰}

11. ⾼度不适应

⾼度不适应是当内层对象的⾼度发⽣变化时外层⾼度不能⾃动进⾏调节，特别是当内层对象使⽤margin 或paddign 时。

例： #box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解决⽅法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上 border属性。12 .IE6下为什么图⽚下有空隙产⽣解 决这个BUG的⽅法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.13.如何对齐⽂本与⽂本输⼊框加上 vertical-align:middle;

标准中定义id与class有什么区别吗⼀.web标准中是不容许重复ID的,⽐如 div id="aa" 不容许重复2次,⽽class 定义的是类,理论上可以⽆限重复, 这样需要多次引⽤的定义便可以使⽤他.⼆.属性的优先级问题

ID 的优先级要⾼于class,看上⾯的例⼦三.⽅便JS等客户端脚本,如果在页⾯中要对某个对象进⾏脚本操作,那么可以给他定义⼀个ID,否则只能利⽤遍历页⾯元素加上指定特定属性来找到 它,这是相对浪费时间资源,远远不如⼀个ID来得简单.15. LI中内容超过长度后以省略号显⽰的⽅法此⽅法适⽤与IE与OP浏览器16. 为什么web标准中IE⽆法设置滚动条颜⾊了17. 为什么⽆法定义1px左右⾼度的容器IE6下这个问题是因为默认的⾏⾼造成的,解决的⽅法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px18.怎么样才能让层显⽰在FLASH之上呢解决的办法是给FLASH设置透明

19.怎样使⼀个层垂直居中于浏览器中这⾥我们使⽤百分⽐绝对定位,与外补丁负值的⽅法,负值的⼤⼩为其⾃⾝宽度⾼度除以⼆

FF 与IE

1. Div居中问题

div设置 margin-left, margin-right 为 auto 时已经居中，IE 不⾏，IE需要设定body居中，⾸先在⽗级元素定义text-algin: center;这个的意思就是在⽗级元素内的内容居中。

2.链接(a标签)的边框与背景

a 链接加边框和背景⾊，需设置 display: block, 同时设置 float: left 保证不换⾏。参照 menubar, 给 a 和 menubar 设置⾼度是为了避免底边显⽰错位, 若不设 height, 可以在menubar 中插⼊⼀个空格。3. 超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多⼈应该都遇到过这个问题,解决⽅法是改变CSS属性的排列顺序: L-V-H-A

Code:

4. 游标⼿指cursor

cursor: pointer 可以同时在 IE FF 中显⽰游标⼿指状， hand 仅 IE 可以 的padding与margin

ul标签在FF中默认是有padding值的,⽽在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决⼤部分问题

6. FORM标签

这 个标签在IE中,将会⾃动margin⼀些边距,⽽在FF中margin则是0,因此,如果想显⽰⼀致,所以最好在css中指定margin和 padding,针对上⾯两个问题,我的css中⼀般⾸先都使⽤这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后 ⾯就不会为这个头疼了.

7. BOX模型解释不⼀致问题

在FF和IE 中的BOX模型解释不⼀致导致相差2px解决⽅法：div{margin:30px!important;margin:28px;} 注意这两个 margin的顺序⼀定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div {maring:30px;margin:28px}重复定义的话按照最后⼀个来执⾏，所以不可以只写margin:xx px!important;

#box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0}

#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

8. 属性选择器(这个不能算是兼容,是隐藏css的⼀个bug)

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作⽤.属性选择器和⼦选择器 还是有区别的,⼦选择器的范围从形式来说缩⼩了,属性选择器的范围⽐较⼤,如p[id]中,所有p标签中有id的都是同样式的.

9.最狠的⼿段-!important;

如果实在没有办法解决⼀些细节问题,可以⽤这个⽅法.FF对于”!important”会⾃动优先解析,然⽽IE则会忽略.如下

.tabd1{

background:url(/res/images/up/) no-repeat 0px 0px !important; /*Style for FF*/

background:url(/res/images/up/) no-repeat 1px 0px; /* Style for IE */}

值得注意的是，⼀定要将xxxx !important 这句放置在另⼀句之上，上⾯已经提过

,FF的默认值问题

或 许你⼀直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让⼈头疼，然后⼀边写css，⼀边咒骂那个可恶的M$ IE.其实对于css的标 准⽀持⽅⾯，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不⼀样⽽已，掌握了这个技巧，你会发现写出兼容FF和IE的css并不是那么困 难，或许对于简单的css，你完全可以不⽤”!important”这个东西了。

我们都知道，浏览器在显⽰⽹页的时候，都会根据⽹页的 css样式表来决定如何显⽰，但是我们在样式表中未必会将所有的元素都进⾏了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采 ⽤内置默认的⽅式来进⾏显⽰，譬如⽂字，如果你没有在css中指定颜⾊，那么浏览器将采⽤⿊⾊或者系统颜⾊来显⽰，div或者其他元素的背景，如果在 css中没有被指定，浏览器则将其设置为⽩⾊或者透明，等等其他未定义的样式均如此。所以有很多东西出现FF和IE显⽰不⼀样的根本原因在于它们的默认显 ⽰不⼀样，⽽这个默认样式该如何显⽰我知道在w3中有没有对应的标准来进⾏规定，因此对于这点也就别去怪罪IE了。11.为什么FF下⽂本⽆法撑开容器的⾼度标准浏览器中固定⾼度值的容器是不会象IE6⾥那样被撑开的,那我⼜想固定⾼度,⼜想能被撑开需要怎样设置呢？办法就是去掉height设置 min-height:200px; 这⾥为了照顾不认识min-height的IE6 可以这样定义:{

height:auto!important;

height:200px;

min-height:200px;

}x下如何使连续长字段⾃动换⾏众所周知IE中直接使⽤ word-wrap:break-word 就可以了, FF中我们使⽤JS插⼊ 的⽅法来解决aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/*

function toBreakWord(el, intLen){

var ōbj=mentById(el);

var strContent=TML;

var strTemp="";

while(>intLen){

strTemp+=(0,intLen)+" ";

strContent=(intLen,);

}

strTemp+=" "+strContent;

TML=strTemp;

}

if(mentById && !) toBreakWord("ff", 37);

/* ]]> */

13.为什么IE6下容器的宽度和FF解释不同呢问 题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这⾥IE6解释为200PX ,⽽FF则解释为220PX,那究竟是怎么导致的 问题呢？⼤家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、 standards mode的相关知识,请参考:/china/msdn/library/webservices//

?mfr=true

IE6,IE7,FF

IE7.0 出来了，对CSS的⽀持⼜有新问题。浏览器多了，⽹页兼容性更差了，疲于奔命的还是我们 ，为解决IE7.0的兼容问题，找来了下⾯这篇⽂章： 现在我⼤ 部分都是⽤!important来hack，对于ie6和firefox测试可以正常显⽰，但是ie7对!important可以正确解释，会导致页⾯没 按要求显⽰！下⾯是三个浏览器的兼容性收集.

第⼀种，是CSS HACK的⽅法

height:20px; /*For Firefox*/

*height:25px; /*For IE7 & IE6*/

_height:20px; /*For IE6*/

注意顺序。

这样也属于CSS HACK，不过没有上⾯这样简洁。 #example { color: #333; } /* Moz */

* html #example { color: #666; } /* IE6 */

*+html #example { color: #999; } /* IE7 */

第⼆种，是使⽤IE专⽤的条件注释

第三种，css filter的办法，以下为经典从国外⽹站翻译过来的。.

新建⼀个css样式如下：

#item {

width: 200px;

height: 200px;

background: red;

}

新建⼀个div,并使⽤前⾯定义的css的样式：

在body表现这⾥加⼊lang属性,中⽂为zh：

现在对div元素再定义⼀个样式：

*:lang(en) #item{

background:green !important;

}

这样做是为了⽤!important覆盖原来的css样式,由于:lang选择器ie7.0并不⽀持,所以对这句话不会有任何作⽤,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不⽀持此属性,所以需要加⼊以下css样式：

#item:empty {

background: green !important

}

:empty选择器为 css3的规范,尽管safari并不⽀持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿⾊会现在在除ie各版本以外的浏览器上。

2023年6月21日发(作者：)

最全的CSS浏览器兼容问题整理（IE6.0、IE7.0与FireFox）（收藏）CSS 对浏览器的兼容性有时让⼈很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从⽹上收集了IE7,6与Fireofx的兼容性处理⽅法并整理了 ⼀下.对于web2.0的过度,请尽量⽤xhtml格式写代码,⽽且DOCTYPE 影响 CSS 处理,作为W3C的标准,⼀定要加DOCTYPE声 名.

常见问题的垂直居中问题vertical-align:middle; 将⾏距增加到和整个DIV⼀样⾼ line-height:200px; 然后插⼊⽂字，就垂直居中了。缺点是要控制内容不要换⾏

2. margin加倍的问题

设置为float的div在ie 下设置的margin会加倍。这是⼀个ie6都存在的bug。解决⽅案是在这个div⾥⾯加上display:inline;

例 如：

<#div id=”imfloat”>

相应的css为

#IamFloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/}

3. 浮动ie产⽣的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产⽣200px的距离 display:inline; //使浮动忽略}

这⾥细说⼀下block与inline两个元素：block元素的特点是,总是在新⾏上开始,⾼度,宽度,⾏⾼,边距都 可以控制(块元素);Inline元素的特点是,和其他元素在同⼀⾏上,不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同⼀⾏排列的效果 diplay:table;

4 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;}

5.页⾯的最⼩宽度

min -width是个⾮常⽅便的CSS命令，它可以指定元素最⼩也不能⼩于某个宽度，这样就能保证排版⼀直正确。但IE不认得这个，⽽它实际上把width当 做最⼩宽度来使。为了让这⼀命令在IE上也能⽤，可以把⼀个