DIV＋CSS设计IE6、IE7、Firefox兼容性

你对DIV＋CSS设计IE6、IE7、Firefox兼容性问题是否比较熟悉，这里和大家分享一下，对完全使用DIV+CSS设计的网页，就应该更注意IE6、IE7、Firefox对CSS样式的兼容。

创新互联是一家集网站建设,宣威企业网站建设,宣威品牌网站建设,网站定制,宣威网站建设报价,网络营销,网络优化,宣威网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

DIV＋CSS设计IE6、IE7、Firefox兼容性

　　DIV＋CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV＋CSS网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV+CSS设计的网页，就应该更注意IE6、IE7、Firefox对CSS样式的兼容，不然，你的网页可能乱的一塌糊涂！我经常被这些东西整的焦头烂额,于是乎在网上找了些资料,加上自己的理解和这些日子的经验,整理了一些资料,其中有一些我还没用到的和还不能理解的,就直接从别的地方给粘了过来,不知道有没有错误,等我以后用到的时候慢慢改吧,希望对大家有点帮助!

　　什么是浏览器兼容：当我们使用不同的浏览器（FirefoxIE7IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，在这种浏览器下显示正常，在另一种下就乱了，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。好吧，我服了行吧，那我就利用你们的不兼容各写一段css,让他们各执行各的，这下总该你没脾气了吧，呵呵。

一、!important(功能有限)

　　随着IE7对!important的支持,!important方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)
例如:

 
 
 
    
  
  
  
  1. #example{  
    2. 
  
  
  
  2. width:100px!important;/*IE7+Firefox*/  
    3. 
  
  
  
  3. width:200px;/*IE6*/  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5.  
    6.

二、CSSHACK的方法

　　首先需要知道的是：

所有浏览器通用height:100px;
IE6专用_height:100px;
IE7专用*+height:100px;
IE6、IE7共用*height:100px;
IE7、Firefox共用height:100px!important;

例如：

 
 
 
    
  
  
  
  1. #example{height:100px;}/*Firefox*/  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. *html#example{height:200px;}/*IE6*/  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. *+html#example{height:300px;}/*IE7*/  
    6. 
  
  
  
  6.  
    7.

 下面的这种方法比较简单

举几个例子：

1、IE6-IE7+Firefox

 
 
 
    
  
  
  
  1. #example{  
    2. 
  
  
  
  2. height:100px;/*Firefox+IE7*/  
    3. 
  
  
  
  3. _height:200px;/*IE6*/  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5. 其实这个用上面说的***种方法也可以  
    6. 
  
  
  
  6. #example{  
    7. 
  
  
  
  7. height:100px!important;/*Firefox+IE7*/  
    8. 
  
  
  
  8. height:200px;/*IE6*/  
    9. 
  
  
  
  9. }  
    10. 
  
  
  
  10.  
    11.

 2、IE6+IE7-Firefox

 
 
 
    
  
  
  
  1. #example{  
    2. 
  
  
  
  2. height:100px;/*Firefox*/  
    3. 
  
  
  
  3. *height:200px;/*IE6+IE7*/  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5.  
    6.

 3、IE6+Firefox-IE7

 
 
 
    
  
  
  
  1. #example{  
    2. 
  
  
  
  2. height:100px;/*IE6+Firefox*/  
    3. 
  
  
  
  3. *+height:200px;/*IE7*/  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5.  
    6.

 4、IE6IE7Firefox各不相同

 
 
 
    
  
  
  
  1. #example{  
    2. 
  
  
  
  2. height:100px;/*Firefox*/  
    3. 
  
  
  
  3. _height:200px;/*IE6*/  
    4. 
  
  
  
  4. *+height:300px;/*IE7*/  
    5. 
  
  
  
  5. }  
    6. 
  
  
  
  6. 或：  
    7. 
  
  
  
  7. #example{  
    8. 
  
  
  
  8. height:100px;/*Firefox*/  
    9. 
  
  
  
  9. *height:300px;/*IE7*/  
    10. 
  
  
  
  10. _height:200px;/*IE6*/  
    11. 
  
  
  
  11. }  
    12. 
  
  
  
  12.  
    13.

 　　需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面。
解释一下4的代码：

读代码的时候，***行height:100px;大家都通用，IE6IE7Firefox都显示100px
到了第二行*height:300px;Firefox不认识这个属性，IE6IE7都认，所以Firefox还显示100px，而IE6IE7把***行得到的height属性给覆盖了，都显示300px

到了第三行_height:200px;只有IE6认识，所以IE6就又覆盖了在第二行得到的height,最终显示200px
这样，三个浏览器都有自己的height属性了，各玩各的去吧

这样说要是你还不明白，要么你去撞墙，要么我去!不过还是你去比较好。

哦，差点忘了说了：
*+html对IE7的兼容必须保证HTML顶部有如下声明：
 

 
 
 
    
  
  
  
  1. 
  
  
  
  2.  
    3. 
  
  
  
  3. "http://www.w3.org/TR/html4/loose.dtd"> 
    4. 
  
  
  
  4.  
    5.

#p#三、使用IE专用的条件注释

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.   
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.  > 
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.   
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.  > 
    16. 
  
  
  
  16.  
    17.

 貌似要编三套css，我还没用过，先粘过来再说

IE的if条件Hack

 
 
 
    
  
  
  
  1. 1. 除IE外都可识别  
    2. 
  
  
  
  2. 2.  
    3. 
  
  
  
  3. 3.  
    4. 
  
  
  
  4. 4.  
    5. 
  
  
  
  5. 5.  
    6. 
  
  
  
  6. 6.  
    7. 
  
  
  
  7. 7.  
    8. 
  
  
  
  8. 8.  
    9. 
  
  
  
  9. 9.  
    10. 
  
  
  
  10. 10.  
    11. 
  
  
  
  11. 11. 注:gt=GreatThen大于  
    12.

>=>大于号
lt=LessThen小于
<= gte=GreatThenorEqual大于或等于
lte=LessThenorEqual小于或等于

四、cssfilter的办法

　　新建一个css样式如下：

 
 
 
    
  
  
  
  1. #item{  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. width:200px;  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. height:200px;  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. background:red;  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. }  
    10. 
  
  
  
  10.  
    11.

　　新建一个div,并使用前面定义的css的样式：

 
 
 
    
  
  
  
  1. sometexthere div> 
    2. 
  
  
  
  2.  
    3.

在body表现这里加入lang属性,中文为zh：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3.

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

 
 
 
    
  
  
  
  1. *:lang(en)#item{  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. background:green!important;  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. }  
    6. 
  
  
  
  6.  
    7.

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

 
 
 
    
  
  
  
  1. #item:empty{  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. background:green!important  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. }  
    6.

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

五、FLOAT闭合（clearingfloat）

　　网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合，这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV，这种情况一般出现在一个父DIV下包含多个子DIV。解决办法：

１、给父DIV也设上float(不要骂我，我知道是废话)

2、在所有子DIV后新加一个空DIV(不推荐，有些浏览器可以看见空DIV产生的空隙)

比如：

 
 
 
    
  
  
  
  1. .parent{width:100px;}  
    2. 
  
  
  
  2. .son1{float:left;width:20px;}  
    3. 
  
  
  
  3. .son2{float:left;width:80px;}  
    4. 
  
  
  
  4. .clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}  
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  div> 
    8. 
  
  
  
  8.  div> 
    9. 
  
  
  
  9.  div> 
    10. 
  
  
  
  10.  div> 
    11. 
  
  
  
  11.  
    12.

 3、万能float闭合

　　将以下代码加入GlobalCSS中,给需要闭合的div加上class=”clearfix”即可,屡试不爽.
代码: