浏览器兼容

什么是 CSS hack

不同的浏览器或不同版本的浏览器对css的支持和解析程度不一样，导致了显示的效果也不一样或不显示，这个时候就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到想要的页面效果，这就是CSS hack。
表现形式（主要针对IE）

• 内部hack：如IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""。
• 选择器hack：如IE6能识别*html .class{}，IE7能识别*+html.class{}。
• HTML条件注释Hack：这种方式是IE浏览器专有的Hack方式,在非IE浏览器下会被当做注释而被忽略，而IE会根据if条件来判断是否解析。

谈一谈浏览器兼容的思路

• 要不要做
  产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
  成本的角度 (有无必要做某件事)
• 做到什么程度
  让哪些浏览器支持哪些效果
• 如何做
  根据兼容需求选择技术框架/库(jquery)
  根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
  postCSS
  条件注释、CSS Hack、js 能力检测做一些修补
• 渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
• 优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

列举5种以上浏览器兼容的写法

• IE6,7可以识别星号
• IE6可以识别下划线
• IE6,7中绝对定位的元素在没有设置top(bottom)和left(right)的情况下会不受控制，所有必须设置这两个值
• -webkit-针对safari，chrome浏览器的内核CSS写法
• ul列表标签中的li设置margin属性的时候在ie6中会被双倍放大，所以最好用padding属性代替间距。
• img标签在IE6 7中左右又一个像素的间距，必须给img设置左浮动，img最好设置全局属性display属性为block。
• 右浮动元素，如果同行还有其他元素不设置左浮动，在IE6 7中将会掉到下一行。

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

一般在哪个网站查询属性兼容性？

caniuse