【转】初识CSS hack——区分IE6、IE7、IE8、Firefox

    众多浏览器蜂拥而起,争夺IE独霸已久的地盘,新一轮浏览器大战已经打响。作为此次大战受益者的用户,也是喜忧参半,喜的是选择越来越多,忧的是不同版本浏览器兼容性问题。不同浏览器对CSS有不同的认识,导致网页在不同浏览器下变得面目全非、惨不忍睹,心如亲生骨肉被后妈打残般疼痛。

    如果想得到预期的效果,我们就要针对不同的浏览器写不同的CSS,让它可以同时兼容不同的浏览器,这个过程叫做CSS hack

一、常用浏览器

   IE6 / IE7 / IE8:捆绑式销售令IE占有市场的最大份额,也使得微软孤高自傲,停止进取与创新。在对IE6的一片叫骂声中,众多浏览器蜂拥而起,微软慌忙推出IE7应对虎视耽耽劲敌。可IE7还未站稳脚,微软又推出了IE8。

    FireFox:火狐顶着“垃圾”的头衔一直向前奔跑着,独立内核、自由开放、新鲜特性,使得它在几场硝烟弥漫的战役中取得胜利,也赢得人们越来越多的青睐。

    TT:使用IE内核,以QQ为靠山占有了小部分市场,标签特性是人们喜爱它的原因。但永远是偏房,做不了正室。

    Maxthon:使用IE内核,真正站在用户角度去考虑浏览器的实用性,前景一片光明,大有IE、FireFox、Maxthon三足鼎立之势。

    Opera:独立内核,小巧实用、速度快,但有些占内存,国人使用得比较少。

二、浏览器主要差异

    Padding:FF下,padding会增加div的高度和宽度,IE则不会。

          IE效果  

          FF效果

    Ul:FF默认Ul有list-style和padding,IE则没有。解决方法:定义padding:0; list-style:none;

          IE效果

          FF效果

    高度宽度:为div定义高度和宽度,若其中所填充的内容大于所定义的尺寸,在FF下div会被撑破,在IE下会自动适应宽度与高度。

          IE效果          

          FF效果         

    清除浮动:对div使用float后,一定要使用clear:both清除浮动,否则在FF下错位。

    Float Margin:应用float后又使用了margin,那么在IE下margin将会被放大一倍,比如定义float:left; margin-left:10px,实际在IE下不是10px,而是20px。IE6存在此问题,IE7、IE8无此问题。解决方法:加上display:inline便可解决此问题。

          IE6效果

          IE7 / IE8 / FF效果

    字体单位:px为字体大小的单位,在IE下,那么无论在浏览器中放大或缩小,以px为单位字体大小都不变,FF则可以随之变化。解决方法:使用em作字体单位。

三、CSS hack写法

    书写顺序为FireFox在最前,其次是IE8、IE7,最后是IE6。     

       color:red;//所有浏览器

      color:blue\9;//所有IE

      +color:orange;//IE7

      _color:green;//IE6

    若浏览器为FireFox,那么color:red;若浏览器为IE8,根据CSS优先性原则,color:blue;若为IE7,color:orange;若为IE6,则color:green。

    IE6识别 * 、_

    IE7识别 * 、+

    IE8识别 * 、/9

    FF什么都不识别

原文地址:https://www.cnblogs.com/danghuijian/p/4400157.html