• 浏览器兼容 IE6、IE7、IE8、Firefox、Opera CSS hack区分


    小知识:什么是CSS hack?

      由于不同的浏览器,比如IE6、IE7、IE8、Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

      这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

      这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

    针对样式名

    如果只让ie6看见用*html .head{color:#000;} 如果只让ie7看见用*+html .head{color:#000;} 如果只让ff看见用:root body .head{color:#000;} 如果只让ff、IE8看见用html>/**/body .head{color:#000;} 如果只是不让ie6看见用html>body .head{color:#000;} 即对IE 6无效 如果只是不让ff、IE8看见用*body .head{color:#000;}    即对ff、IE8无效

    针对具体属性

    如果只让ie6看见用_     .head{_color:#000;} 如果只让ie7看见用+与_结合的方法:     .head{+color:#f00;!;_color:#000;}

    IE8正式版hack

    \9″ 例:”margin:0px auto\9;”.这里的”\9″可以区别所有IE8和FireFox. “*” IE6、IE7可以识别.IE8、FireFox不能. “_” IE6可以识别”_”,IE7、IE8、FireFox不能. 如: .a {color:#f00;     color:#f60\9;    +color:#00FF00;    _color:#0000FF; } 从左到右分别对应 FF,IE8 IE7 IE6

    -------------------------------------------------

    各浏览器CSS hack兼容表:

      IE6 IE7 IE8 Firefox Chrome Safari
    !important   Y   Y    
    _ Y          
    * Y Y        
    *+   Y        
    \9 Y Y Y      
    \0     Y      
    nth-of-type(1)         Y Y

    代码示例:

    #test{ color:red; /* 所有浏览器都支持 */ color:red !important;/* Firefox、IE7支持 */ _color:red; /* IE6支持 */ *color:red; /* IE6、IE7支持 */ *+color:red; /* IE7支持 */ color:red\9; /* IE6、IE7、IE8支持 */ color:red\0; /* IE8支持 */ }

    body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

    整体测试代码示例:

    .test{ color:#000000; color:#0000FF\0; [color:#00FF00; *color:#FFFF00; _color:#FF0000; }

    其他说明:

    1、如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下: <meta http-equiv="x-ua-compatible" content="ie=7" />

    2、body:nth-of-type(1) 如果这样写,表示全局查找body,将会对应第一个<body>。

    3、还有其他写法,比如: *html #test{}或者 *+html #test{}

    4、*+html 对IE7的hack 必须保证HTML顶部有如下声明: http://www.w3.org/TR/html4/loose.dtd

    5、顺序:Firefox、IE8、IE7、IE6依次排列。

  • 相关阅读:
    HDU 4069 Squiggly Sudoku
    SPOJ 1771 Yet Another NQueen Problem
    POJ 3469 Dual Core CPU
    CF 118E Bertown roads
    URAL 1664 Pipeline Transportation
    POJ 3076 Sudoku
    UVA 10330 Power Transmission
    HDU 1426 Sudoku Killer
    POJ 3074 Sudoku
    HDU 3315 My Brute
  • 原文地址:https://www.cnblogs.com/hnyei/p/2393384.html
Copyright © 2020-2023  润新知