20161216作业

• 什么是 CSS hack

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果，这个就叫CSS hack。

• 谈一谈浏览器兼容的思路

就是当你做一款产品时，你就要考虑这个网站是不是要做浏览器的兼容，如果需要做兼容的话，它到底要兼容到ie几（因为一般来说pc网站的兼容就是ie浏览器，国产浏览器就是chrome和ie内核，而firefoxs及其他的浏览器会自动升级就相当于它是最新的）。
如果要兼容的话，如果去做？

• 要不要做

  • 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
  • 成本的角度（有无必要做某件事）

• 做到什么程度

  • 让哪些浏览器支持哪些效果

• 如何做

• 根据兼容需求选择技术框架/库（jquery）

• 根据兼容需求选择兼容工具（html5shiv.js、respond.js、css reset、normalize.css、Modernizr）

• postCSS

• 条件注释、CSS Hack、is能力检测做一些修补

• 列举5种以上浏览器兼容的处理细节

1. 双倍边距
   如果你有一个分配有左/右边距的浮动元素，IE6会使得边距双倍化。比如，margin-left: 5px； 将会变成10px。
   可以通过对浮动元素添加display:inline来解决这个问题

div#content {
  float:left;
  width:200px;
  margin-left:10px;
  display:inline;
}

2. IE的最小高度
   IE忽略min-height属性，可以用下面的hack来修复它。

selector {
min-height:500px;
height:auto !important;
height:500px;
}

3. 禁用IE默认的垂直滚动条
   默认情况下，即使内容适合窗口大小，IE6 和 IE7也会显示垂直滚动条。可以使用overflow:auto，让滚动条只在你需要时出现。

html {
 overflow: auto;
}

4. IE6、IE7兼容inline-block

.target{ 
display: inline-block;
*display: inline; 
*zoom: 1;
}

5. 清除浮动

.clearfix:after{
 content: ' '; 
display: block; 
clear: both;
}
.clearfix{
 *zoom: 1;   /* 仅对ie67有效 */
}

• 以下工具/名词是做什么的

• 条件注释
  条件注释（conditional comment）是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。

使用了条件注释的页面在Windows Internet Explore 9 中可正常工作，但是在Internet 10 中无法正常工作。IE10不再支持条件注释

• IE Hack
  通过CSS属性前缀法、选择器前缀法以及IE条件注释法写只有IE浏览器能识别的css样式。
  例子：

.box{
 color: red; 
_color: blue; /*ie6*/ 
*color: pink; /*ie67*/ 
color: yellow\9; /*ie/edge 6-8*/
}

• js 能力检测
  就是看浏览器是否支持当前对象的属性或是方法，先通过获得页面文本内容的方式来了解兼容性，并封装函数或对象以解决此类问题。

• html5shiv.js
  用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。

• respond.js
  Respond.js 是一个快速、轻量的 polyfill（用于实现浏览器并不支持的原生API的代码。），用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。（让IE6-8支持CSS3 Media Query）

• css reset
  每个浏览器都有一些自带的或者共有的默认样式，会造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致，比如*{margin:0;padding:0}就是一个最简单的css reset。

• normalize.css
  Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
  参考

• Modernizr
  Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
  参考1
  参考2

• postCSS
  它可以被理解为一个平台，可以让一些插件在上面跑
  它提供了一个解析器，可以将CSS解析成抽象语法树
  通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer
  参考1
  参考2

文章著作权归饥人谷_sunny和饥人谷所有，转载须说明来源