一、CSS Hack


标准模式和混杂模式

  - IE6之前，不同浏览器间没有兼容性可言

  - IE6之后浏览器厂家间开始寻求标准统一，但仍允许向前兼容，于是产生了不同的运行模式

  - 浏览器运行模式可以分为:

      - 混杂模式 (Quirks Mode)

      - 标准模式 (Standard Mode)

      - 准标准模式 (Almost Standard Mode)

  - 不同模式下，浏览器对CSS(尤其是盒模型)和JS解析效果会产生不同

  - 其他浏览器会根据DOCTYPE自动进行模式选择，IE除此之外还可以手动选择运行模式

  - 触发混杂模式

      - 不声明DOCTYPE

wKiom1byHNKS0Z5BAAA5VdeKiu0055.png

  - 触发准标准模式（遵循标准，仍兼容部分非标准代码）

      - <!-- HTML 4.01 过渡型 -->

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"                             "http://www.w3.org/TR/html4/loose.dtd">

      - <!-- HTML 4.01 框架集型 -->

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"                                 "http://www.w3.org/TR/html4/frameset.dtd">

      - <!-- XHTML 1.0 过渡型 -->

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"                              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      - <!-- XHTML 1.0 框架集型 -->

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"                                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


  - 触发标准模式(遵循标准，不允许使用非标准代码)

      - <!-- HTML 4.01 严格型 --> 

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

                                "http://www.w3.org/TR/html4/strict.dtd">

      - <!-- XHTML 1.0 严格型 -->

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"                                                         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


      - <!-- HTML 5 --> 

        <!DOCTYPE html>


CSS Hack 概念

  - 浏览器的类型及版本的不同会造成 CSS 效果不尽相同

      - 不同厂商的浏览器，比如 IE、Safari、FireFox、Chrome、Opera等

      - 同一厂商的浏览器的不同版本，比如IE6、IE7

  - 需要针对不同的浏览器编写不同的 CSS

      - 实现浏览器兼容

      - 也可以为不同版本的浏览器定制编写不同的 CSS 效果


浏览器兼容性

  - 根据不同的浏览器对 CSS 的支持及解析结果

  - margin 和 padding

wKiom1byLqyR5yXiAABAw6fYWq8572.png

wKiom1byLoiRpT2fAABSqlLjv5Q247.png  wKiom1byLtbSuMhjAABKlOKxuwI758.png

              wKioL1byL4mxn916AAAlgEHueX0165.png

  - 居中布局

      - IE 低版本中，对于父元素用 text-align:center;

      - 其他，子元素需用 margin: 0 auto;

wKioL1byL-LwOMwEAADTG4pu7mw341.png

  - 元素高度与内容

      - IE 低版本中，元素的高度至少包含内容

      - 其他，内容超出高度，则显示

wKiom1byMVvDxlxaAADAVCqGues756.png

  - 子元素设置上外边距时，父元素需要设置边框或者外边距

      - HTML

wKiom1byM4yhg_TQAAB8fvPdwtE615.png

      - CSS

wKiom1byM6jhWklfAACV6GF-_rI178.png

      - 显示结果

wKiom1byM7ux9YpjAABB_3XCxEo137.png

  - 其他浏览器

wKiom1byM-nCu3uNAACCi09cV8U933.png

  - 设置父元素的边框(可以设置为透明)

wKiom1byNBWDrf8aAACqWJRx3JI952.png

  - 或者设置父元素的内边距,替代子元素的外边框

wKiom1byNJeynEF-AAD-kUMFN8g123.png


CSS Hack 原理

  - 主要有

      - CSS 类内部 Hack

      - 选择器 Hack

      - HTML 头部引用 Hack


CSS 类内部 Hack

  - 属性前缀

      - 在 CSS 样式属性名前加上一些只有特定浏览器才能识别的 hack 前缀

wKiom1byQP2yuHuqAAD9y1u_iFA447.png

wKioL1byQxbxzmg1AAEj7o8SuIc173.png


选择器Hack

  - 选择器前缀

      - 在 CSS 选择器前加上一些只有某些特定浏览器才能识别的前缀

      - *前缀: IE6,比如 *html

      - *+前缀: IE7,比如 *+html

      - @media screen\9{...},只对IE6/7生效

      - ...  


HTML 头部引用 Hack  

  - 即 IE 条件注释

      - 条件注释的基本结构和 HTML的注释(<!-->)相同

      - IE 根据 if 条件来判断是否解析条件注释里的内容

  - gt : greater than , 选择条件版本以上版本，不包含条件版本

  - lt : less than,选择条件版本以下版本，不包含条件版本

  - gte: greater than or equal,选择条件版本以上的版本，包含条件版本

  - lte: less than or equal, 选择条件版本以下版本，包含条件版本

  - !: 选择条件版本以外所有版本，无论高低

  - 只在 IE 下生效

      - <!--[if IE]> 这段文字只在 IE 浏览器显示 <![endif]--> 

  - 只在 IE6 下生效

      - <!--[if IE 6]> 这段文字只在IE6 浏览器显示<![endif]-->

  - 只在 IE6 以上版本生效

      - <!--[if IE gte 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示<![endif]-->

  - 只在 IE8 上不生效

      - <!--[if ！IE 8]> 这段文字在非IE8浏览器显示 <![endif]-->

  - 非 IE 浏览器生效

      - <!--[if !IE]> 这段文字只在非IE浏览器显示 <![endif]-->

wKiom1bySNLBkZMzAAFmOPqnxJY155.png


总结：本章内容主要介绍了 Css Hack