W3C标准实战之:多浏览器兼容解决方案（转自51）

前几天设计公司网页的时候一直使用的是IE6.0.
做完了才发现在火狐上面显示存在很多问题.结果一气之下,删之.重做.
后来搜索了一下资料,发现浏览器兼容也大有学问.
好了.下面进入正题吧...

设计CSS Hack和Filter通常有两种方法：

    1）一种是利用浏览器自身的bug来隐藏或显示样式或声明：

    2）另一种是利用浏览器对CSS支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式。

     目前，有两种方法可以实现样式表文件的过滤：一种是使用IE条件注释；另一种是利用不同浏览器对@import规则解析Bug实现过滤。

      1、IE条件注释

        从IE5开始，微软提供了一种非标准的逻辑语句对网页中倒入的样式表文件进行判断，它能够实现根据不同浏览器版本引入不同的CSS样式表文件，并且这种功能在IE后继版本中都得到了支持。

        1）针对某个具体IE版本应用样式表文件

        例如：

    <!--[IE条件注释，适用于IE7浏览器]-->
      <!--[if IE 7]>
      <link href="ie7.css" type="text/css" rel="stylesheet">
      <!-->

      <!--[IE条件注释，适用于IE6浏览器]-->
      <!--[if IE 6]>
      <style type="text/css">
      @import url("ie6.css");
      </style>
      <!-->


      <!--[IE条件注释，适用于IE5.5浏览器]-->
      <!--[if IE 5.5000]>
      <style type="text/css">
      @import url("ie5.css");
      </style>
      <!-->

      2）针对所有IE版本应用样式表文件

      如果要将某个样式表文件应用于IE5及更高版本浏览器时，可以在条件语句中仅指明IE，不再需要制定具体的版本号。如：

      <!--[IE条件注释，适用于IE5级更高版本的浏览器]-->
      <!--[if IE]>
      <style type="text/css">
      @import url("ie.css");
      </style>
      <!-->

      3）针对一定范围IE版本应用样式表文件

      如果要实现在一定版本内IE浏览器有效，可以结合lte、lt、gte、gt和！关键字，指明一个使用范围：

l    lte：Less than or equal to 的简写，也就是小于或等于的意思。

l    lt：Less than的简写，也就是小于的意思。

l    gte：Greater than or equal to的简写。

l    gt：Greater than的简写。

l    ！：不等于的意思。

例如：  

    <!--[IE条件注释，适用于IE5级更高版本的浏览器]-->
      <!--[if gte IE 5.5000]>
      <style type="text/css">
      @import url("gte_ie55.css");
      </style>
      <!-->


由于这种方法不被其他浏览器支持，所以编写针对IE浏览器的样式表文件，实现IE与非IE浏览器，以及不同IE版本浏览器之间兼容是最有效的一种方法。

    2、@import规则过滤器

  IE条件注释带有很大的局限性，仅适用于IE浏览器系列版本，对于其他浏览器的过滤就显得力不从心了。同时IE条件语句缺乏灵活性，它只能放在HTML中，不可以放在CSS中使用，如果不需要IE条件注释语句时，用户需要在每一页中删除该注释语句，显得麻烦且不灵活。

    Tantek Celik利用不同浏览器的解析Bug，发明了@import规则过滤器。

    /*仅适用IE 5/Windows版本浏览器*/
    @media tty{
    i{content:"\";/*" "*/}}; @import 'ie5/win.css'; {;}/*";}
    }/**/

    /*仅适用IE 5.5/Windows版本浏览器*/
    @media tty{
    i{content:"\";/*" "*/}}@m; @import 'ie55/win.css'; {/*";}
    }/**/

    /*仅适用IE 5/Mac版本浏览器*/
    @/*\*//*/
    @import 'ie5mac.css'; 
    /**/

    /*适用非IE 5.x/Windows系列更低版本浏览器*/
    @import "null?\"\{";
    @import "style.css";
    @import "null?\"\{";

    /*适用非IE 5/Windows系列更低版本浏览器（注意：import和'style.css'之间不要有空格） */
    @import"style.css";
      或
    @import'style.css';

    /*适用非IE 4/Windows版本浏览器（注意：import和'style.css'之间要有空格）*/
    @import 'style.css';
      或
    @import "style.css";

      3、!important关键字过滤器

      !important命令表示所附加的声明拥有最高优先级的意思。但由于遨游1.6及更低版本、IE6及更低版本浏览器不能识别它。可以利用IE的这个Bug作为过滤器，实现同一规则对于Windows系统中IE级更低版本应用一个声明。由于Firfox和Opera等其他标准浏览器能够识别!important，而IE6及更低版本的浏览器不能识别它，因此有些设计师喜欢使用!important关键字来实现IE与非IE之间的过滤，但是IE7开始支持!important命令，所以这个过滤器在IE7种将失效。

      例如：遨游1.6及更低版本、IE6及更低版本浏览器上显示宽为800px，而在IE7和其他浏览器上则显示为414px：

      /*!important关键字过滤器*/
      #content{
      width:414px !important;
      width:800px;
      height:200px;
      border:1px double red;
      }

      4、下划线属性过滤器

      下划线属性与!important关键字具有相同的作用，当在一个属性面前增加一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略这个声明，但是在Windows IE6级更低版本浏览器中会忽略下划线而继续解析这个规则。例如对于上面的CSS规则可以等价写为：

        /*[下划线属性过滤器]*/
      #content{
      width:414px;
      _width:800px;
      height:200px;
      border:1px double red;
      }

      5、转义属性过滤器

      由于Windows IE 5.x及更低版本浏览其不能识别转义符，如果属性中出现反斜杠，会把反斜杠但做普通的字符来识别。而符合标准的浏览器都能够识别转义字符。因此，可以把它作为一格过滤器，实现Windows IE5.x系列及更低版本浏览器中隐藏声明，例如：

      /*[转义属性过滤器]*/
      #content{
      width:414px;
      widt\h:800px;
      height:200px;
      border:1px double red;
      }

      Windows IE 5.x及更低版本浏览会显示为414像素宽，而符合标准的浏览器则解析为800像素宽。使用转义符时要小心，一般不要把反斜杠放在数字1-9或字母a~f、n、r、t、v（包括大小写）的前面，因为这些转义符可能会表示其他意思，并不是表示字符原意。

      如果把反斜杠放在属性名称的前面，它能够隐藏NS 4/Win或NS 4/Mac、IE 5/Mac版本浏览器中的声明。例如：

      /*[转义属性过滤器]*/
      #content{
      width:414px;
      \ width:800px;
      height:200px;
      border:1px double red;
      }

    则上面的样式在NS 4/Win或NS 4/Mac、IE 5/Mac版本浏览器中宽都显示为414像素，而忽略\width:800px;的存在。

    6、*html选择符过滤器

      在标准网页中，html元素被认为根元素，其它元素都被包含在其中。但是，在IE6及更低版本浏览器中默认一格匿名根元素，html元素被认为是它的子元素，这个匿名跟元素就是通用选择符*。我们可以使用*符号包含html元素定义一个特殊的选择符过滤器，专门定义只能在IE6及更低版本浏览器中的应用样式。例如：

    /*[*html选择符过滤器]*/
      *html{/*定义在IE6及更低版本中显示的字体是灰色*/
      color:#666;
      }

      但是IE7浏览器中这个Bug已被修复，所以*html选择符定义的样式在IE7中都被忽略。

      7、属性选择符过滤器

      属性选择符过滤器是CSS2支持的一类使用规则，现在符合标准的浏览器都支持属性选择符，但是IE6及更低版本浏览器不支持它。我们可以把它作为标准浏览器专用选择符来使用，或者在IE6及更低版本中隐藏样式。不过在IE7中开始支持这个规则，所以属性选择符定义的样式会在IE7种被解析。例如：

      <style type="text/css">
      /*[选择符属性过滤器]*/
      div.content{/*适用于所有浏览器的样式*/
      width:400px;
      height:200px;
      border:1px double red;
      }
      div{/*在非IE 6及更低版本浏览器中覆盖上面定义的宽和边界声明，实现盒模型兼容*/
      width:800px;
      border:1px double #999;
      }
      </style>

        这里的选择符最好不要使用id。因为id选择符的特殊性值为100，class选择符特殊性值为10，而属性选择符的特殊性值为11，如果使用id作为属性，可能会由于特殊性值大小，而id具有较大的优先级，从而执行id选择符定义的样式，达不到将样式分开的目的。

      8、子对象选择符过滤

      与属性选择符相同，子对象选择符不是严格意义生的过滤器，而是通过Windows IE6及更低版本浏览器不支持的CSS有效规则来实现过滤。用子对象选择符可以隐藏IE6及更低版本浏览器不支持的样式，不过在IE7中已开始支持子对象选择符。例如：

      /*[子对象选择符过滤器]*/
      span>p{/*符合标准浏览器中显示为黑色*/
      color:#000000;
      }
      span{/*IE6及更低版本浏览器中显示为蓝色*/
      color:#0000FF;
      }

      9、相邻选择符过滤器

      由于IE6及更低版本浏览器不支持相邻选择符规则，因此我们可以把它作为一个过滤器，用来在IE6及更低版本浏览器中隐藏样式。但是在IE7中开始支持相邻选择符，所以使用时不能用它来解决IE与非IE浏览器的兼容问题。例如：

      /*[相邻选择符过滤器]*/
      h2+ .main{/*符合标准浏览器中显示为红色*/
      color:red;
      }
      .main{/*IE6及更低版本浏览器中显示为蓝色*/
      color:blue;
      }

      10、转义选择符过滤器

        与转义属性过滤器一样，把反斜杆放在选择符中也可以实现在IE5.x系列版本浏览器中隐藏样式的目的，但是在IE4浏览器中可以解析这个规则，所以不能够隐藏样式。例如：

        /*[转义选择符过滤器]*/
        #testElement{/*在IE5.x系列版本浏览器中显示为红色*/
        color:red;
        }
        #te\stElement{/*在非IE5.x系列版本浏览器中显示为蓝色*/
        color:blue;
        }

        11、注释反斜杠过滤器

        Mac系统中的IE5存在已各Bug，当在注释内添加反斜杠后，浏览器就会错误的解析这个转义符，如果把反斜杠添加到结束注释字符前面，则其他浏览器就会忽略这个转义字符，而IE5/Mac由于执行这个转义字符，会误认为注释还没有结束，因此会把下面的样式代码当作注释来看待，从而实现隐藏代码的目的。例如：

      /*[注释反斜杠过滤器]*/
      div{
      width:775px;
      }
      /*Hide code for IE5/Mac \*/
      div{
      width:100px;
      }
      /*End Hide*/

1 针对firefox ie6 ie7的CSS样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题

主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。

但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释.

#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-
}

4 浮动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;

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

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在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 清除浮动

.hackbox{
display:table;
//将对象作为块元素级的表格显示
}

或者

.hackbox{
clear:both;
}

或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的

……#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

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>

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

p{}div{}
p{}div{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。例：

<div id=”box”>
<p>p对象中的内容</p>
</div>

CSS：

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