首页 > 代码库 > CSS兼容的一些问题

CSS兼容的一些问题

2024-07-20 11:55:44   230人阅读

       DIV＋CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV＋CSS网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV+CSS设计的网页，就应该更注意IE6 IE7 FF对CSS样式的兼容.

 兼容性处理要点

    1、DOCTYPE 影响 CSS 处理


    2  、 FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会. 解决办法：给DIV设定IE、FF两个宽度，

在IE的宽度前加上IE特有标记" * "号。或用 !important 多设一个 height 和 width（但随着IE7对!important的支持所以慎用）。

   

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

       例如: 
 
        #example { 
         width: 100px !important; /* IE7+FF */ 
         width: 103px; /* IE6 */ 
} 



    4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

    5、在mozilla firefox和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- w\idth:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}  
    

      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顶部有如下声明： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd"> 
 
 
     使用IE专用的条件注释 
 
   <!--其他浏览器 --> 
 
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css.css" /> 
 
   <!--[if IE 7]> 
 
   <!-- 适合于IE7 --> 
 
   <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/ie7.css" /> 
 
    <![endif]--> 
 
    <!--[if lte IE 6]> 
 
    <!-- 适合于IE6及以下 --> 
 
   <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/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]> 仅IE5.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 小于或等于 
 
     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> 
 
除了IE，真的可以解决。下来就要解决IE的问题了，再加上“_height:1%”，这个问题就完全解决了。 
 
       5、作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适
 
应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。 例如某一个wrapper如下定义：
 
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

 

        margin加倍的问题

 

设置了float浮动属性的div,在设置margin属性，这个在IE6下，就会出现Margin加倍的现象；这个是IE6的一个著名的BUG。解决办法就是给DIV设置属性

display:inline; 例如： 

<#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:10px;/*IE8 FF下理解为10px*/ display:inline;/*IE6下理解为20px*/}

     

       页面的最小宽度

     

      页面的最小宽度 min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实

际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类, 然后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的；但第2行

的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

     

          IE6的3像素Bug 

 

           IE6的3像素Bug DIV 设置Float浮动后， IE6下就是产生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> 六 IE6下图片下有空隙产生 IE6下为什么图片下有空隙产生解决这个

BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-

bottom 都可以解决.

   

     浮动IE6产生的双倍距离 

 
#box{ float:left; 
      width:100px; 
       margin:0 0 0 100px; 
} 
这种情况之下IE6会产生200px的距离 
 
解决办法：加上display:inline，使浮动忽略 
 
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行
 
上,…不可控制(内嵌元素); 
 
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 


  用JS判断不同的浏览器载入不同的css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//根据不同的浏览器调用不同的CSS!
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
document.write(‘<link  href="http://www.mamicode.com/ie.css" type="text/css" rel="stylesheet" />‘);
}else{
document.write(‘<link  href="http://www.mamicode.com/ff.css" type="text/css" rel="stylesheet" />‘);
}
</script>
</head>
<body >
<div id="box"> 在不同的浏览器下，这行字的色应该不同！</div>
</body>
</html>

CSS兼容的一些问题


联系
我们