CSS HACK技术以及如何解决浏览器兼容性

一、处理兼容性？：针对不同的浏览器编写不同的css。
二、标准模式与混杂模式

• IE6之前，不同浏览器之间没有兼容性而言
• 浏览器运行模式
  
  • 混杂
  • 标准
  • 非标准
• 触发混杂模式
  不声明DOCTYPE
  
  • 会默认使用IE5.5来薰染页面
• 不同模式下，浏览器对CSS 和JS解析效果不同

三、什么是CSS HACK?
浏览器的类型及版本的不同会造成CSS效果渲染不同。
四、浏览器兼容性
1、浏览器的类型及版本不同，会造成CSS效果解析不同，通过CSS HACK来解决。
2、兼容性问题

• body的margin和padding
  
  • IE的默认margin和padding大
  • 解决方案：统一设置body 的margin和padding
• 居中布局
  
  • 在IE低版本中，对父元素设置text-align:center可以控制所有元素居中；其他浏览器中，块级元素居中要使用margin:0 auto;
  • 解决方案：统一通过设置margin:0 auto;实现居中
• 元素的高度和内容
  
  • 在IE低版本中，元素的高度至少包含内容；其他浏览器中，内容超出高度后，溢出显示
  • 解决方案：设置overflow:hidden;
• 子元素设置上外边距时，其实是设置在了父元素上
  
  • 解决方案：
    
    • 设置父元素边框
    • 通过父元素的padding-top来解决
    • 内容生成（IE低版本除外）
      3、CSS HACK解决浏览器兼容性问题
      （1）CSS HACK原理：通过CSS的优先级解决
      （2）CSS HACK方式：
      ① CSS类内部HACK：对选择器内部的属性或者值，增加前缀或后缀的方式

hack	写法	IE6	IE7	IE8	IE9	IE10
*	*color	√	√
+	+color	√	√
-	-color	√
_	_color	√
#	color	√	√
\0	color\0			√	√	√
\9\0	color\9\0				√	√
!important	color:blue!important;		√	√	√	√

background-color:red;      //通用
background-color: yellow\0;//8 9 10 --->8
background-color: pink\9\0;//9 10
*background-color: green; //6 7 -->7
_background-color: blue;  //6

②选择器HACK：为选择器添加前缀，去匹配不同的浏览器

• *前缀：IE6
• *+前缀：IE7
• @media screen\9{……} 对IE6 IE7有效

③HTML头部引入HACK：IE条件注释
IE根据if条件来判断是否解析条件注释里面的内容

• gt：greater than 选择条件版本以上版本，不包括条件版本
• lt:less than 选择条件版本以下版本，不包括条件版本
  
  • eg:gt IE6：选择大于IE6以上的浏览器
• gte:greater than equal 选择条件版本以上版本，包括条件版本
• lte:less than equal 选择条件版本以下版本，包括条件版本
• ! 选择条件版本以外的所有版本，无论高低。

// 条件注释语法
<!--[if gt IE6]>
//该段内容只被IE6以上的浏览器解析
<![endif] -->

五、如何解决浏览器兼容性（面试题）？
1、html,css,js代码，全部为标准模式
2、针对不支持的属性，需要通过浏览器前缀来解决

• -webkit- : chrome、Safari
• -moz- ： Firefox
• -o- ： opera
• -ms- ： Microsoft IE

3、针对微软IE的低版本浏览器，通过CSS HACK方式
（1）CSS类内部Hack

 - IE8、9、10：\0
 - IE9、10：\9\0
 - IE7:* , + , #
 - IE6:_ , -
 - 

（2）选择器Hack

• *前缀
• *+前缀
• @media screen{}

（3）头部引入Hack

• 通过IE的条件注释引入不同的CSS文件

4、主流浏览器的主流版本

• 通过响应的CSS框架来解决。（bootstrap等）