CSS Hack——前端面试题

一、CSS Hack的概念
由于不同厂商的流览器或某阅读器的不同版本（如IE,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，招致在不同阅读器的环境中呈现出不分歧的页面展示效果。这时，我们为了取得统一的页面效果，就需求针对不同的阅读器或不同版本写特定的CSS款式。
我们把针对不同的阅读器/不同版本写相应的CSS code的过程，叫做CSS hack!
二、CSS Hack的原理
由于不同的阅读器和阅读器各版本对CSS的支持及解析结果不一样，以及CSS优先级对阅读器展示效果的影响，我们能够据此针对不同的阅读器情形来应用不同的CSS。
三、CSS Hack的分类
3.1 CSS 属性前缀法（即类内部 Hack）
（1）IE6 能辨认下划线" _"和星号" *"
（2）IE7 能辨认星号" *"，但不能辨认下划线" _ "
（3）IE6~IE10 都辨认" 9 "
（4）firefox 前述三个都不能辨认。
3.2 选择器前缀法（即选择器 Hack）
（1）IE6 能辨认 *html .class{}
（2）IE7 能辨认 *+html .class{} 或 *:first-child+html .class{}
3.3 IE条件注释法（即 HTML 头部援用 if IE Hack）
（1）一切 IE (注：IE10+ 曾经不再支持条件注释)能辨认 <!--[if IE]>IE阅读器显现的内容 <![endif]-->
（2）IE6及以下版本能辨认 <!--[if lt IE 6]>只在IE6-显现的内容 <![endif]-->
这类 Hack 不只对 CSS 生效，对写在判别语句里面的一切代码都会生效。
（3）实践项目中 CSS Hack 大局部是针对 IE 阅读器不同版本之间的表现差别而引入的。
四、CSS Hack书写次第
普通是将适用范围广、被辨认才能强的 CSS 定义在前面。
五、CSS Hack IE条件注释法
这种方式是 IE 阅读器专有的 Hack 方式，微软官方引荐运用的 hack 方式。
5.1 只在 IE 生效
<!--[if IE]> 这段文字只在 IE 阅读器显现<![endif]-->
5.2 只在 IE6 生效
<!--[if IE 6]> 这段文字只在 IE6 阅读器显现<![endif]-->
5.3 只在 IE6+ 生效
<!--[if gte IE 6]> 这段文字只在 IE6以上(包括) 阅读器显现<![endif]-->
5.4 只在 IE8 不生效
<!--[if ! IE 8]> 这段文字只在 非IE8 阅读器显现<![endif]-->
5.5 非 IE 阅读器生效
<!--[if ! IE]> 这段文字只在 非IE 阅读器显现<![endif]-->
六、CSS Hack 类内部属性前缀法
属性前缀法是在 CSS 款式属性名前加上一些只要特定阅读器才干辨认的 hack 前缀，以到达预期的页面展示效果。

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。