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专⽤的条件注释
<!--其他浏览器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 适合于IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 适合于IE6及以下 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
IE的if条件Hack
1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
2. <!--[if IE]> 所有的IE可识别 <![endif]-->
3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
4. <!--[if IE 5]> 仅IE
5.0与IE5.5可以识别 <![endif]-->
5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->
7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->
10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->注:gt = Great Then ⼤于
> = > ⼤于号
lt = Less Then ⼩于
< = < ⼩于号
gte = Great Then or Equal ⼤于或等于
lte = Less Then or Equal ⼩于或等于
四、css filter的办法
新建⼀个css样式如下：
网页float是什么意思
#item {
width: 200px;
height: 200px;
background: red;
}
新建⼀个div，并使⽤前⾯定义的css的样式：
<div >some text here</div>
在body表现这⾥加⼊lang属性，中⽂为zh：
<body lang="en">
现在对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也设上float
2、在所有⼦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;}
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
<div class="clear"></div>
</div>
3、万能 float 闭合
将以下代码加⼊Global CSS 中，给需要闭合的div加上 class=”clearfix” 即可
代码:
<style>
/* 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 */
</style>
:
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;}
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
</div>
作者原话：原理是，外围元素之所以不能很好的延伸，问题出在了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上也能⽤，可以把⼀个<div> 放到 <body> 标签下，然后为div指定⼀个类：
然后CSS这样设计：
#container{
min-width: 600px;
width:e-xpression(document.body.clientWidth < 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代码
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>
针对上⾯这段代码，下⾯说⼀下我的理解：
第⼀、只要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，截字省略号

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。