记12月16日作业

Q1：什么是 CSS hack？

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

Q2：谈一谈浏览器兼容的思路

1. 从产品角度
   研究产品的受众群体，受众习惯使用浏览器的比例。
   使用优雅降级还是渐进增强。
   做到目标想要的效果，是否会增加大量成本。
2. 做到什么程度
   各个浏览器的识别标准不同，同个浏览器不同版本也不相同，需要考虑在各个浏览器各个版本所需的效果程度。
3. 如何做？
   根据兼容需求选择技术框架/库（jquery）
   根据兼容需求选择兼容工具（html5shiv.js、respond.js、css reset、normalize.css、Modernizr）
   postCSS
   条件注释、CSS hack、JS能力检测做一些修补

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

• 不同浏览器的默认内外边距不一样
  解决：重置浏览器默认属性
  {margin:0;padding:0;}
  或者使用reset.css/normalize.css
• 块属性float，又横向margin后IE6显示的margin比设置的大
  解决：在float的元素样式中加入display:inline;将其转化为行内元素
• 设置高度小于10px的标签时，在IE6、IE7中超出设置的高度
  解决：设置overlow:hidden;，或设置行高line-height小于你设置的高度
• 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
  解决：在display:block;后面加入display:inline;display:table;
• 几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
  解决：使用float属性为img布局
• IE6、IE7、IE8中opacity无效
  解决：添加filter:alpha(opacity=50);

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

条件注释：HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
IE Hack：使用特殊的符号或者方式写出只有IE浏览器可以解析的代码，大致有CSS属性前缀法、选择器前缀法以及IE条件注释法。
js 能力检测：使用JS的语法检测浏览器支持的属性，以便展示效果
html5shiv.js：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
respond.js：是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计
css reset：重置浏览器的css默认属性
normalize.css：是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
Modernizr：是一个检测用户浏览器HTML5和CSS3能力的JavaScript库。
postCSS：是CSS变成JavaScript的数据，使它变成可操作。PostCSS是基于JavaScript插件，然后执行代码操作。PostCSS自身并不会改变CSS，它只是一种插件，为执行任何的转变铺平道路。