前端面试题-CSS Hack

fizz 发布于2019-08-30 14:13 / 861人阅读

摘要：实际项目中大部分是针对浏览器不同版本之间的表现差异而引入的。四书写顺序一般是将适用范围广被识别能力强的定义在前面。五条件注释法这种方式是浏览器专有的方式，微软官方推荐使用的方式。

一、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+ 已经不再支持条件注释)能识别

（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

6.2 IE浏览器标准模式

（1）“ - ″IE6 生效，专有的 hack

（2）“ 9 ″ IE6 / IE7 / IE8 / IE9 / IE10 都生效

（3）“ ″ IE8 / IE9 / IE10 都生效

（4）“ 9 ″ IE9 / IE10 生效

七、CSS Hack 选择器前缀法

选择器前缀法是针对页面表现不一致或者需要特殊对待的浏览器，在 CSS 选择器前加上只有某些特定浏览器才能识别的前缀进行 hack。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115866.html

前端面试题-CSS Hack

摘要：实际项目中大部分是针对浏览器不同版本之间的表现差异而引入的。四书写顺序一般是将适用范围广被识别能力强的定义在前面。五条件注释法这种方式是浏览器专有的方式，微软官方推荐使用的方式。一、CSS Hack的概念由于不同厂商的流览器或某浏览器的不同版本（如IE,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面...

2i18ns 2019-08-22 15:41 评论0 收藏0
前端面试题-CSS Hack

摘要：实际项目中大部分是针对浏览器不同版本之间的表现差异而引入的。四书写顺序一般是将适用范围广被识别能力强的定义在前面。五条件注释法这种方式是浏览器专有的方式，微软官方推荐使用的方式。一、CSS Hack的概念由于不同厂商的流览器或某浏览器的不同版本（如IE,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面...

Ryan_Li 2019-08-01 18:43 评论0 收藏0
基本方法笔记 - 收藏集 - 掘金

摘要：探讨判断横竖屏的最佳实现前端掘金在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。探讨判断横竖屏的最佳实现 - 前端 - 掘金在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。判断横竖屏的实现方法多种多样，本文就此来探讨下目前有哪些实现方法以及其中的优...

maochunguang 2019-08-20 17:44 评论0 收藏0
Web前端面试题目汇总

摘要：前端面试题目汇总一部分什么是盒子模型盒子模型包含内容内边距外边距和边框四部分。第四步本地服务器再向上一步返回的域名服务器发送请求，然后接受请求的服务器查询自己的缓存，如果没有该记录项，则返回相关的下级的域名服务器的地址。 Web前端面试题目汇总一、HTML/CSS部分 1.什么是盒子模型？盒子模型包含内容(content)、内边距(pandding)、外边距(margin)和边...

Lucky_Boy 2019-08-05 12:42 评论0 收藏0
Web前端面试题目汇总

摘要：前端面试题目汇总一部分什么是盒子模型盒子模型包含内容内边距外边距和边框四部分。第四步本地服务器再向上一步返回的域名服务器发送请求，然后接受请求的服务器查询自己的缓存，如果没有该记录项，则返回相关的下级的域名服务器的地址。 Web前端面试题目汇总一、HTML/CSS部分 1.什么是盒子模型？盒子模型包含内容(content)、内边距(pandding)、外边距(margin)和边...

golden_hamster 2019-08-29 14:07 评论0 收藏0