所有浏览器通用height: 100px;IE6 专用_height: 100px;IE6 专用*height: 100px;IE7 专用*+height: 100px;IE7、FF 共用height: 100px !important;什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，在这种浏览器下显示正常，在另一种下就乱了，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。
好吧，我服了行吧，那我就利用你们的不兼容各写一段css,让他们各执行各的，呵呵。
一、!important (功能有限)随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)例如:#example {width: 100px !important; /* IE7+FF */width: 200px; /* 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顶部有如下声明：〈!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"对css缩写的支持问题：不论是ie 还是ff对css的缩写都有一小点问题比如border: 0xp solid #fff;两个浏览器支持都没有问题但对于四个边的magin不同情况下，就不能用这种缩写了，无论是ie还是ff又会出现边界解释错误，而导致页面变形正确缩写：border-width:0px 1px 2px 3px;border-style:solid;border-color:#fff;第二点是ie对于css的magin padding 等默认值为0px，但ff却不一样，为了保持外观的统一性，即使padding为0你也要写上，以免ff在浏览中的错位。
IE与Firefox的CSS兼容大全1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式，值得注意的是，一定要将xxxx !important 这句放置在另一句之上6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。
缺点是要控制内容不要换行7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE 不能识别，但别的浏览器可以识别。
所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;10.IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。
这时我们可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题注意事项：1、float的div一定要闭合。
例如：(其中floatA、floatB的属性已经设置为float:left;)<#divid=\"floatA\" ><#div id=\"floatB\" ><#div id=\"NOTfloatC\" >这里的NOTfloatC并不希望继续平移，而是希望往下排。
这段代码在IE中毫无问题，问题出在FF。
原因是NOTfloatC并非float标签，必须将float标签闭合。
在<#div class=\"floatB\"><#div class=\"NOTfloatC\">之间加上<#div class=\"clear\">这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
并且将clear这种样式定义为为如下即可：.clear{clear:both;}此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：.colwrapper{overflow:hidden;zoom:1;margin:5px auto;}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、关于容器的包涵关系很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。
在IE中，外层的宽度会被内层更宽的div挤破。
一定要用Photoshop 或者Firework量取像素级的精度。
4、关于高度的问题如果是动态地添加内容，高度最好不要定义。
浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。
（似乎有时候不会自动往下撑开，不知道具体怎么回事）5、最狠的手段 - !important;如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下.tabd1{background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过。