摘要:实际项目中大部分是针对浏览器不同版本之间的表现差异而引入的。四书写顺序一般是将适用范围广被识别能力强的定义在前面。五条件注释法这种方式是浏览器专有的方式,微软官方推荐使用的方式。
一、CSS Hack的概念
由于不同厂商的流览器或某浏览器的不同版本(如IE,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式。二、CSS Hack的原理我们把针对不同的浏览器/不同版本写相应的CSS code的过程,叫做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+ 已经不再支持条件注释)能识别
(2)IE6及以下版本能识别
这类 Hack 不仅对 CSS 生效,对写在判断语句里面的所有代码都会生效。
(3)实际项目中 CSS Hack 大部分是针对 IE 浏览器不同版本之间的表现差异而引入的。
四、CSS Hack书写顺序一般是将适用范围广、被识别能力强的 CSS 定义在前面。五、CSS Hack IE条件注释法
这种方式是 IE 浏览器专有的 Hack 方式,微软官方推荐使用的 hack 方式。
5.1 只在 IE 生效 5.2 只在 IE6 生效 5.3 只在 IE6+ 生效 5.4 只在 IE8 不生效 5.5 非 IE 浏览器生效 六、CSS Hack 类内部属性前缀法属性前缀法是在 CSS 样式属性名前加上一些只有特定浏览器才能识别的 hack 前缀,以达到预期的页面展现效果。
6.1 IE浏览器各版本 CSS hack 对照表hack | 写法 | 实例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) | IE9(S) | IE9(Q) | IE10(S) | IE10(Q) |
---|---|---|---|---|---|---|---|---|---|---|---|---|
* | *color | 青色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
+ | +color | 绿色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
- | -color | 黄色 | Y | Y | N | N | N | N | N | N | N | N |
_ | _color | 蓝色 | Y | Y | N | Y | N | Y | N | Y | N | N |
# | #color | 紫色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
0 | color:red0 | 红色 | N | N | N | N | Y | N | Y | N | Y | N |
90 | color:red90 | 粉色 | N | N | N | N | N | N | Y | N | Y | N |
!important | color:blue !important;color:green; | 棕色 | N | N | Y | N | Y | N | Y | N | Y | Y |
(1)“ - ″IE6 生效,专有的 hack
(2)“ 9 ″ IE6 / IE7 / IE8 / IE9 / IE10 都生效
(3)“