2023年6月21日发(作者：)
CSS浏览器兼容性常见问题总结⼤全（推荐）DIV＋CSS设计IE6、IE7、FF 兼容性DIV＋CSS⽹页布局这是⼀种趋势,我也开始顺应这股趋势了,不过在使⽤DIV＋CSS⽹站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使⽤DIV+CSS设计的⽹页，就应该更注意IE6 IE7 FF对CSS样式的兼容.什么是浏览器兼容：当我们使⽤不同的浏览器（Firefox IE7 IE6）访问同⼀个⽹站，或者页⾯的时候，会出现⼀些不兼容的问题，在这种浏览器下显⽰正常，在另⼀种下就乱了，我们在编写CSS的时候会很恼⽕，刚修复了这个浏览器的问题，结果另外⼀个浏览器却出了新问题。
⼀、!important (功能有限)随着IE7对!important的⽀持, !important ⽅法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)例如:
#example {
width: 100px !important; /* IE7+FF */
width: 103px; /* IE6 */
}
⼆、CSS HACK的⽅法⾸先需要知道的是：
所有浏览器 通⽤ height: 100px;
IE6 专⽤ _height: 100px;
IE7 专⽤ *+height: 100px;
IE6、IE7 共⽤ *height: 100px;
IE7、FF 共⽤ height: 100px !important;
例如：
#example { height:100px; } /* FF */
* html #example { height:200px; } /* IE6 */
*+html #example { height:300px; } /* IE7 */
下⾯的这种⽅法⽐较简单
举⼏个例⼦：
1、IE6 - IE7+FF
#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}其实这个⽤上⾯说的第⼀种⽅法也可以#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}
2、IE6+IE7 - FF
#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
} 3、IE6+FF - IE7
#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}
4、IE6 IE7 FF 各不相同
#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
或：#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}
需要注意的是，代码的顺序⼀定不能颠倒了，要不⼜前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会⽤后⾯的覆盖前⾯的，就象给变量赋值⼀个道理，所以我们把通⽤的放前⾯，越专⽤的越放后⾯
解释⼀下4的代码：
读代码的时候，第⼀⾏height:100px; ⼤家都通⽤，IE6 IE7 FF 都显⽰100px到了第⼆⾏*height:300px; FF不认识这个属性，IE6 IE7都认，所以FF还显⽰100px，⽽IE6 IE7把第⼀⾏得到的height属性给覆盖了，都显⽰300px到了第三⾏_height:200px;只有IE6认识，所以IE6就⼜覆盖了在第⼆⾏得到的height,最终显⽰200px这样，三个浏览器都有⾃⼰的height属性了. *+html 对IE7的兼容 必须保证HTML顶部有如下声明：
三、使⽤IE专⽤的条件注释
IE的if条件Hack
1. 除IE外都可识别
2.
3.
4.
5.
6.
7.
8.
9.
10.
11. 注:gt = Great Then ⼤于
> = > ⼤于号 lt = Less Then ⼩于
< = < ⼩于号
gte = Great Then or Equal ⼤于或等于
lte = Less Then or Equal ⼩于或等于
四、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各版本以外的浏览器上。
五、FLOAT闭合（clearing float）
⽹页在某些浏览器上显⽰错位很多时候都是因为使⽤了float浮动⽽没有真正闭合，这也是div⽆法⾃适应⾼度的⼀个原因。如果⽗div没有设float⽽其⼦div却设了float的话,⽗div⽆法包住整个⼦DIV，这种情况⼀般出现在⼀个⽗DIV下包含多个⼦DIV。解决办法：
１、给⽗DIV也设上float2、在所有⼦DIV后新加⼀个空DIV(不推荐，有些浏览器可以看见空DIV产⽣的空隙)
⽐如：
.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
将以下代码加⼊Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可代码:
:after（伪对象）,设置在对象后发⽣的内容，通常和content配合使⽤，IE不⽀持此伪对象，⾮Ie 浏览器⽀持，所以并不影响到IE/WIN浏览器。这种的最⿇烦。
4、overflow:auto只要在⽗DIV的CSS中加上overflow:auto就搞定。
举例：
.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
作者原话：原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见（见W3C的解释）。现在只要将给外围元素添 加⼀个“overflow:auto”，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决IE的问题了，再加上“_height:1%”，这个问题就完全解决了。
我试了⼀下，其实不加"_height:1%“在IE下也⾏，留着吧。
六、需要注意的⼀些兼容细节
1, FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会.
解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上IE特有标记" * "号。
2, 页⾯居中问题.
body {TEXT-ALIGN: center;} 在IE下⾜够了，但FF下失效。
解决办法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; "
3, 有的时候在IE6上看见⼀些奇怪的间隙，可我们⾼度明明设好了呀。
解决办法：试试在有空隙的DIV上加上"font-size:0px;"
4, 关于⼿形光标. cursor: pointer. ⽽hand 只适⽤于 IE.
5, 浮动IE6产⽣的双倍距离
#box{ float:left;
width:100px;
margin:0 0 0 100px;
} 这种情况之下IE6会产⽣200px的距离
解决办法：加上display:inline，使浮动忽略
这⾥细说⼀下block,inline两个元素,Block元素的特点是:总是在新⾏上开始,⾼度,宽度,⾏⾼,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同⼀⾏上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同⼀⾏排列的的效果
6 页⾯的最⼩宽度
min-width是个⾮常⽅便的CSS命令，它可以指定元素最⼩也不能⼩于某个宽度，这样就能保证排版⼀直正确。但IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就⼤了，如果只⽤宽度和⾼度，正常的浏览器⾥ 这两个值就不会变，如果只⽤min-width和min-height的话，IE下⾯根本等于没有设置宽度和⾼度。⽐如要设置背景图⽚，这个宽度是⽐较重要的。
解决办法：为了让这⼀命令在IE上也能⽤，可以把⼀个
然后CSS这样设计：#container{
min-width: 600px;
width:e-xpression(Width < 600? “600px”: “auto” );
}
第⼀个min-width是正常的；但第2⾏的width使⽤了Javascript，这只有IE才认得，这也会让你的HTML⽂档不太正规。它实际上通过Javascript的判断来实现最⼩宽度。
7、UL和FORM标签的padding与margin
ul标签在FF中默认是有padding值的,⽽在IE中只有margin默认有值。FORM标签在IE中,将会⾃动margin⼀些边距,⽽在FF中margin则是0；
解决办法：css中⾸先都使⽤这样的样式ul,form{margin:0;padding:0;}.8 ,DIV浮动IE⽂本产⽣3象素的bug
左边对象浮动，右边采⽤外补丁的左边距来定位，右边对象内的⽂本会离左边有3px的间距.#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
针对上⾯这段代码，下⾯说⼀下我的理解：
第⼀、只要right定义了width属性，在FF下绝对就会两⾏显⽰第⼆、两个width都定义为百分⽐的话，就算都为100%在IE下也会⼀⾏显⽰。所以上⾯那句所谓“这句是关键”根本没⽤，不加也在⼀⾏，除⾮你width定义的是数值才⽤得上。
所以说上⾯这段代码其实⽤处不⼤，⾄少在FF下不⾏。其实只要只定义left的width就⾏了，right不定义width就不管在IE还是FF下都能成功，但这样的话⽗DIV BOX并没有真正的包含LEFT和RIGHT两⼦DIV,可以⽤我上⾯说的第5种办法解决。最简单的办法就是在RIGHT中加上float:left就OK了9,截字省略号 .hh { -o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:
nowrapoverflow:hidden;
}
这个是在越出长度后会⾃⾏的截掉多出部分的⽂字，并以省略号结尾。技术是好技术，很多⼈都喜欢乱⽤，但注意Firefox并不⽀持
CSS技巧的垂直居中问题 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上也能⽤，可以把⼀个
浮动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”>之间加上 < #div class=”clear”>这个div⼀定要注意位置，⽽且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产⽣异常。并且将clear这种样式定义为为如下即可： .clear{ clear:both;}
②作为外部 wrapper 的 div 不要定死⾼度,为了让⾼度能⾃动适应，要在wrapper⾥⾯加上overflow:hidden; 当包含float的 box的时候，⾼度⾃动适应在IE下⽆效，这时候应该触发IE的layout私有,属性⽤zoom:1;可以做到，这样就达到了兼容。 例如某⼀个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③对于排版,我们⽤得最多的css描述可能就是float:left.有的时候我们需要在n 栏的float 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;} /* Endhide 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对象中的内容
13.如何对齐⽂本与⽂本输⼊框 加上 vertical-align:middle;
标准中定义id与class有什么区别吗⼀.web标准中是不容许重复ID的,⽐如 div id="aa" 不容许重复2次,⽽class 定义的是类,理论上可以⽆限重复, 这样需要多次引⽤的定义便可以使⽤他. ⼆.属性的优先级问题 ID 的优先级要⾼于class,看上⾯的例⼦三.⽅便JS等客户端脚本,如果在页⾯中要对某个对象进⾏脚本操作,那么可以给他定义⼀个ID,否则只能利⽤遍历页⾯元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如⼀个ID来得简单.
15. LI中内容超过长度后以省略号显⽰的⽅法 此⽅法适⽤与IE与OP浏览器
17.为什么⽆法定义1px左右⾼度的容器 IE6下这个问题是因为默认的⾏⾼造成的,解决的⽅法也有很多,例如 verflow:hidden |zoom:0.08 | line-height:1px
18.怎么样才能让层显⽰在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 ffwidth: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 这句放置在另⼀句之上，上⾯已经提过以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助~如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持!
2023年6月21日发(作者：)
CSS浏览器兼容性常见问题总结⼤全（推荐）DIV＋CSS设计IE6、IE7、FF 兼容性DIV＋CSS⽹页布局这是⼀种趋势,我也开始顺应这股趋势了,不过在使⽤DIV＋CSS⽹站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使⽤DIV+CSS设计的⽹页，就应该更注意IE6 IE7 FF对CSS样式的兼容.什么是浏览器兼容：当我们使⽤不同的浏览器（Firefox IE7 IE6）访问同⼀个⽹站，或者页⾯的时候，会出现⼀些不兼容的问题，在这种浏览器下显⽰正常，在另⼀种下就乱了，我们在编写CSS的时候会很恼⽕，刚修复了这个浏览器的问题，结果另外⼀个浏览器却出了新问题。
⼀、!important (功能有限)随着IE7对!important的⽀持, !important ⽅法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)例如:
#example {
width: 100px !important; /* IE7+FF */
width: 103px; /* IE6 */
}
⼆、CSS HACK的⽅法⾸先需要知道的是：
所有浏览器 通⽤ height: 100px;
IE6 专⽤ _height: 100px;
IE7 专⽤ *+height: 100px;
IE6、IE7 共⽤ *height: 100px;
IE7、FF 共⽤ height: 100px !important;
例如：
#example { height:100px; } /* FF */
* html #example { height:200px; } /* IE6 */
*+html #example { height:300px; } /* IE7 */
下⾯的这种⽅法⽐较简单
举⼏个例⼦：
1、IE6 - IE7+FF
#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}其实这个⽤上⾯说的第⼀种⽅法也可以#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}
2、IE6+IE7 - FF
#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
} 3、IE6+FF - IE7
#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}
4、IE6 IE7 FF 各不相同
#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
或：#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}
需要注意的是，代码的顺序⼀定不能颠倒了，要不⼜前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会⽤后⾯的覆盖前⾯的，就象给变量赋值⼀个道理，所以我们把通⽤的放前⾯，越专⽤的越放后⾯
解释⼀下4的代码：
读代码的时候，第⼀⾏height:100px; ⼤家都通⽤，IE6 IE7 FF 都显⽰100px到了第⼆⾏*height:300px; FF不认识这个属性，IE6 IE7都认，所以FF还显⽰100px，⽽IE6 IE7把第⼀⾏得到的height属性给覆盖了，都显⽰300px到了第三⾏_height:200px;只有IE6认识，所以IE6就⼜覆盖了在第⼆⾏得到的height,最终显⽰200px这样，三个浏览器都有⾃⼰的height属性了. *+html 对IE7的兼容 必须保证HTML顶部有如下声明：
三、使⽤IE专⽤的条件注释
IE的if条件Hack
1. 除IE外都可识别
2.
3.
4.
5.
6.
7.
8.
9.
10.
11. 注:gt = Great Then ⼤于
> = > ⼤于号 lt = Less Then ⼩于
< = < ⼩于号
gte = Great Then or Equal ⼤于或等于
lte = Less Then or Equal ⼩于或等于
四、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各版本以外的浏览器上。
五、FLOAT闭合（clearing float）
⽹页在某些浏览器上显⽰错位很多时候都是因为使⽤了float浮动⽽没有真正闭合，这也是div⽆法⾃适应⾼度的⼀个原因。如果⽗div没有设float⽽其⼦div却设了float的话,⽗div⽆法包住整个⼦DIV，这种情况⼀般出现在⼀个⽗DIV下包含多个⼦DIV。解决办法：
１、给⽗DIV也设上float2、在所有⼦DIV后新加⼀个空DIV(不推荐，有些浏览器可以看见空DIV产⽣的空隙)
⽐如：
.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
将以下代码加⼊Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可代码:
:after（伪对象）,设置在对象后发⽣的内容，通常和content配合使⽤，IE不⽀持此伪对象，⾮Ie 浏览器⽀持，所以并不影响到IE/WIN浏览器。这种的最⿇烦。
4、overflow:auto只要在⽗DIV的CSS中加上overflow:auto就搞定。
举例：
.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
作者原话：原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见（见W3C的解释）。现在只要将给外围元素添 加⼀个“overflow:auto”，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决IE的问题了，再加上“_height:1%”，这个问题就完全解决了。
我试了⼀下，其实不加"_height:1%“在IE下也⾏，留着吧。
六、需要注意的⼀些兼容细节
1, FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会.
解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上IE特有标记" * "号。
2, 页⾯居中问题.
body {TEXT-ALIGN: center;} 在IE下⾜够了，但FF下失效。
解决办法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; "
3, 有的时候在IE6上看见⼀些奇怪的间隙，可我们⾼度明明设好了呀。
解决办法：试试在有空隙的DIV上加上"font-size:0px;"
4, 关于⼿形光标. cursor: pointer. ⽽hand 只适⽤于 IE.
5, 浮动IE6产⽣的双倍距离
#box{ float:left;
width:100px;
margin:0 0 0 100px;
} 这种情况之下IE6会产⽣200px的距离
解决办法：加上display:inline，使浮动忽略
这⾥细说⼀下block,inline两个元素,Block元素的特点是:总是在新⾏上开始,⾼度,宽度,⾏⾼,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同⼀⾏上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同⼀⾏排列的的效果
6 页⾯的最⼩宽度
min-width是个⾮常⽅便的CSS命令，它可以指定元素最⼩也不能⼩于某个宽度，这样就能保证排版⼀直正确。但IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就⼤了，如果只⽤宽度和⾼度，正常的浏览器⾥ 这两个值就不会变，如果只⽤min-width和min-height的话，IE下⾯根本等于没有设置宽度和⾼度。⽐如要设置背景图⽚，这个宽度是⽐较重要的。
解决办法：为了让这⼀命令在IE上也能⽤，可以把⼀个
然后CSS这样设计：#container{
min-width: 600px;
width:e-xpression(Width < 600? “600px”: “auto” );
}
第⼀个min-width是正常的；但第2⾏的width使⽤了Javascript，这只有IE才认得，这也会让你的HTML⽂档不太正规。它实际上通过Javascript的判断来实现最⼩宽度。
7、UL和FORM标签的padding与margin
ul标签在FF中默认是有padding值的,⽽在IE中只有margin默认有值。FORM标签在IE中,将会⾃动margin⼀些边距,⽽在FF中margin则是0；
解决办法：css中⾸先都使⽤这样的样式ul,form{margin:0;padding:0;}.8 ,DIV浮动IE⽂本产⽣3象素的bug
左边对象浮动，右边采⽤外补丁的左边距来定位，右边对象内的⽂本会离左边有3px的间距.#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
针对上⾯这段代码，下⾯说⼀下我的理解：
第⼀、只要right定义了width属性，在FF下绝对就会两⾏显⽰第⼆、两个width都定义为百分⽐的话，就算都为100%在IE下也会⼀⾏显⽰。所以上⾯那句所谓“这句是关键”根本没⽤，不加也在⼀⾏，除⾮你width定义的是数值才⽤得上。
所以说上⾯这段代码其实⽤处不⼤，⾄少在FF下不⾏。其实只要只定义left的width就⾏了，right不定义width就不管在IE还是FF下都能成功，但这样的话⽗DIV BOX并没有真正的包含LEFT和RIGHT两⼦DIV,可以⽤我上⾯说的第5种办法解决。最简单的办法就是在RIGHT中加上float:left就OK了9,截字省略号 .hh { -o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:
nowrapoverflow:hidden;
}
这个是在越出长度后会⾃⾏的截掉多出部分的⽂字，并以省略号结尾。技术是好技术，很多⼈都喜欢乱⽤，但注意Firefox并不⽀持
CSS技巧的垂直居中问题 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上也能⽤，可以把⼀个
浮动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”>之间加上 < #div class=”clear”>这个div⼀定要注意位置，⽽且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产⽣异常。并且将clear这种样式定义为为如下即可： .clear{ clear:both;}
②作为外部 wrapper 的 div 不要定死⾼度,为了让⾼度能⾃动适应，要在wrapper⾥⾯加上overflow:hidden; 当包含float的 box的时候，⾼度⾃动适应在IE下⽆效，这时候应该触发IE的layout私有,属性⽤zoom:1;可以做到，这样就达到了兼容。 例如某⼀个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③对于排版,我们⽤得最多的css描述可能就是float:left.有的时候我们需要在n 栏的float 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;} /* Endhide 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对象中的内容
13.如何对齐⽂本与⽂本输⼊框 加上 vertical-align:middle;
标准中定义id与class有什么区别吗⼀.web标准中是不容许重复ID的,⽐如 div id="aa" 不容许重复2次,⽽class 定义的是类,理论上可以⽆限重复, 这样需要多次引⽤的定义便可以使⽤他. ⼆.属性的优先级问题 ID 的优先级要⾼于class,看上⾯的例⼦三.⽅便JS等客户端脚本,如果在页⾯中要对某个对象进⾏脚本操作,那么可以给他定义⼀个ID,否则只能利⽤遍历页⾯元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如⼀个ID来得简单.
15. LI中内容超过长度后以省略号显⽰的⽅法 此⽅法适⽤与IE与OP浏览器
17.为什么⽆法定义1px左右⾼度的容器 IE6下这个问题是因为默认的⾏⾼造成的,解决的⽅法也有很多,例如 verflow:hidden |zoom:0.08 | line-height:1px
18.怎么样才能让层显⽰在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 ffwidth: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 这句放置在另⼀句之上，上⾯已经提过以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助~如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持!
发布评论