常见的兼容性骇客

一、浏览器兼容性骇客:

    使用目的: 保证书写的网页在不同的浏览器上都能兼容
    定义: 针对不同的浏览器书写不同的HTML结构, CSS样式, 从而使浏览器达到一定的渲染效果。

常见的hack: HTML hark和CSS hack。 二、HTML hack:

    常见的HTML hack手段之一: 条件注释；
    普通的HTML注释: <!-- 注释内容 -->
    HTML hack提供的条件注释:
  		 <!--[if IE 8]> 
        	要写的兼容代码
        <link rel="stylesheet" type="text/css" href="main.css"/>
        <![endif]-->
      如果是IE8浏览器, 那么就会执行条件注释里的代码, 去加载，main.css样式表。
      如果不是IE8浏览器, 就不会执行条件注释里的代码。

总结条件注释:

    条件注释是IE浏览器的专利。
    条件注释是IE5后引入的, 所以针对IE5以下的IE版本浏览器无效。(同时, 微软已经不再针对IE10及以上的浏览器版本支持条件注释了)
    因此, 不要针对>=IE10浏览器使用条件注释。

书写条件注释的几个注意点:

    1.用于书写兼容的注释, "<"后要加"!"感叹号;
    2.单词都写在中括号中"[]";
    3.IE和版本号之间要加空格;
    4.不加比较单词, 表示只兼容一个版本。

常见的比较单词:

    lt==>less than (小于)
    lte==> less than orequal (小于等于)
    gt==> great than (大于)
    gte==> great than orequal (大于等于)
        <!--[if IE 6]>
        <p>只是IE6浏览器才能看到我</p>
        <![endif]-->

只在IE浏览器下生效

	<!--[if IE]>
		 只会在IE浏览器显示的代码
	<![endif]-->

非IE浏览器生效的条件注释:

 	<!--[if !IE]>
        只会在非IE浏览器下显示的代码
	<![endif]-->

三、CSShack:

    CSShack包括两种:属性hack和选择器hack
        1.属性hack:
            1)只兼容IE6的hack：
               符号: -或者_,当做属性的前缀, 和属性之间不能有空格
               例子:
                    background:red;//
                    高级浏览器识别: _background:green;//
                    (仅IE6识别)
          原理: 高级浏览器会将"-","_"符号看作是一个未知的属性名不会报错, 不予加载。
            2)兼容IE6,7的hack:
               符号: 键盘上能看到的符号都可以
               例子:
                    background:red;//
                    高级浏览器识别: !background:green;//
                (仅IE7识别)
            3)兼容IE8的hack:
               符号: \0/
               书写位置: 在尾部分号前面
               例子:
                    background:red;//
                    高级浏览器识别:background:green\0/;//
                (仅IE8识别)
            4)兼容IE8,9,10的hack:
                符号: \0
                书写位置: 属性值尾部分号之前
                例子:
                     background:red;//
                     高级浏览器识别:background:green\0;//
                (仅IE8,9,10识别)
            5)兼容IE6,7,8,9,10hack:
                符号: \9
                书写位置: 属性值尾部分号之前
                例子:
                     background:red;//
                     高级浏览器识别:background:green\9;//
                (IE6,7,8,9,10识别)
        2.选择器hack:
             概念: 给选择器添加hack, 这个选择器中的样式都是IE兼容样式, 其他高级浏览器不会识别,
                   同理, 同一个选择器设置交融样式要写在高级样式可识别的常规样式后面, 否则会被层叠。
             1)兼容IE6及以下的hack:
                 符号: * html;
                 书写规则: *和html之间要有空格, 然后再加一个空格后面写选择器。
                 例子:
                     常规写法:
                          .box {
                          width:200px;
                          height:200px;
                          background:red;
                          }
                      兼容写法:
                          * html .box {
                          width:200px;
                          height:200px;
                          background:red;
                          }
             2)兼容IE7及以下版本hack:
                 符号: ",";
                 书写规则: 英文逗号,写在选择器的后面；
                 例子:
                     常规写法:
                          .box {
                              width:200px;
                              height:200px;
                              background:red;
                          }
                      兼容写法:
                          .box, {
                              width:200px;
                              height:200px;
                              background:red;
                          }
            3)兼容除了IE6以外的其他版本hack:
                符号: html>body
                书写规则: 写在选择器的前面,与选择器之间有一个空格。
                例子:
                     常规写法:
                          .box {
                              width:200px;
                              height:200px;
                              background:red;
                          }
                      兼容写法:
                          html>body .box {
                              width:200px;
                              height:200px;
                              background:red;
                          }
             4)兼容除了IE6,7以外的其他版本的hack:
                 符号: html>/**/body
                 书写规则: 写在选择器的前面, 与选择器之间有一个空格。
                 例子:
                     常规写法:
                          .box {
                              width:200px;
                              height:200px;
                              background:red;
                          }
                      兼容写法:
                          html>/**/body .box {
                              width:200px;
                              height:200px;
                              background:red;
                          }

作业：

    	写一个div，在IE6以下显示为gold宽高是200,400；
          在IE7下是绿色，边框是1像素的红色实线。
          在IE8及以上版本显示为蓝色宽高比变为100%400%