HTML&CSS基础-CSS Hcak

　　　　　　　　　　　　HTML&CSS基础-CSS Hcak

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

一.条件Hack

1>.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>条件Hack</title>
    </head>
    <body>
        <!--
            有一些情况，有一些特殊的代码我们只需要再某些特殊的浏览器中执行，而在其它的浏览器中不需要执行，这时就可以使用CSS Hack来解决问题。
            
            CSS Hcak实际上指的是一个特殊的代码，这段代码旨在某个浏览器中可以识别，而其他浏览器不能识别，通过这种方式，来为浏览器设置特殊的代码。
            
        -->
        
        <!--
            条件Hack，条件hack只对IE浏览器有效，其它的浏览器都会将它识别为注释,IE10及以上的浏览器已经不支持这种方式。
        -->
        <!--[if IE 6]>
            <p>当前浏览器是IE6!</p>
        <![endif]-->
        
        <!--[if ! IE 7]>
            <p>当前浏览器不是IE7!</p>
        <![endif]-->
        
        <!--[if gt IE 8]>
            <p>当前浏览器大于IE8版本!</p>
        <![endif]-->
        
        <!--[if lt IE 9]>
            <p>该标签会在IE9以下的浏览器中显示!</p>
        <![endif]-->
        
        <!--[if lte IE 9]>
            <p>该标签会在IE9版本及以下的浏览器版本中显示!</p>
        <![endif]-->
        
        <p>
            回家路千万条,安全行驶第一条!
        </p>
 
    </body>
</html>

2>.浏览器打开以上代码渲染结果

二.属性Hack

1>.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性Hack</title>
        
        <style type="text/css">
            body{
                background-color: deeppink;
                /**
                 *     假设再IE6中将背景颜色设置为黄色才能达到和其它浏览器同样的效果,我们希望黄色背景只在IE6浏览器生效.
                 * 
                 *     属性选择器只有在IE浏览器才能被识别,它有以下取值:
                 *         _:
                 *             在样式前添加一个下划线,则该样式只有在IE6及以下的浏览器才可以识别.
                 *         *:
                 *             选择IE7及以下.
                 *         9:
                 *             选择IE6+.
                 *         :
                 *             选择IE8+和Opera15以下的浏览器,这种选项并不推荐使用.
                 * 
                 *     温馨提示:
                 *         属性Hack不到万不得已的情况尽量不要使用。官方原话："Hack有风险，使用需谨慎"
                 *         
                 */
                _background-color: yellow;
                /**background-color: red;*/
                /*background-color: deepskyblue;*/
                
            }
        </style>
    
    </head>
    
    <body>
    </body>
</html>

2>.浏览器打开以上代码渲染结果

三.选择符级Hack

1>.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择符级Hack</title>
        <style type="text/css">
            /**
             *    在选择器前添加"* html"则该选择器只有IE6可以识别。 
             * 
             *     温馨提示：
             *         尽可能减少对CSS Hack的使用，Hack有风险，使用需谨慎。
             */ 
             
            * html body{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        
    </body>
</html>

2>.浏览器打开以上代码渲染结果