浏览器兼容和样式重置等一些css文件和js文件

1，什么是 CSS hack

CSS hack是一种编程技术。由于不同厂商的浏览器或者同一厂商不同版本的浏览器（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对css支持、解析不一样，导致在不同浏览器或同一浏览器不同版本上展现的页面效果不一样。这时，我们为了获得同一的页面展示效果，所以需要针对不同浏览器或不同版本写特定的css样式，我们把针对不同浏览器，不同版本写相应css code的过程，叫做css hack。
css hack 维基百科
查看css属性兼容
查hack的写法

2，谈一谈浏览器兼容的思路

1）要不要做
a，产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
b，成本的角度 (有无必要做某件事)
2）做到什么程度
让哪些浏览器支持哪些效果
3）如何做
a，根据兼容需求选择技术框架/库(jquery)
b，根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
c， postCSS
d，条件注释、CSS Hack、js 能力检测做一些修补

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

1）合适的框架：
Bootstrap(>=ie8)
jQuery1.(>=ie6) ，jQuery2.(>=ie9)
Vue(>=ie9
2）兼容开发利器
html5shiv.js、respond.js、css reset、normalize.css、Modernizr
例子：
利用Modernizr.css对浏览器能力的检测，对标签不存在的特别优化

图片.png

3）CSS hack
样式类名添加前缀：

图片.png

图片.png

!important妙用：

图片.png

图片.png

动态属性：

图片.png

条件注释和工具结合：
只在ie8中显示

图片.png

只在非ie浏览器中显示

图片.png

在大于ie6和非ie浏览器中显示

图片.png

图片.png

图片.png

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

条件注释

条件注释是，Html源码中被IE浏览器有条件解析的语句，可以对IE提供显示及隐藏代码

IE Hack

IE浏览器可以识别的css写法，有属性前缀，选择器前缀，IE条件注释

js 能力检测

使用js的语法检测浏览器的能力，为不同的能力提供不同的方案进行页面展示

html5shiv.js

对不兼容html5标签的浏览器，创建并模拟html5标签的效果并使相应css生效

respond.js

对不支持CSS3媒体查询的浏览器（ie6-8）模拟CSS3的媒体查询

css reset

清除浏览器元素的默认样式

normalize.css

保护有用的浏览器默认样式；一般化的样式，修复浏览器自身的bug并保证各浏览器的一致性；优化CSS可用性。

Modernizr

是一个JS类库，用来检测浏览器的CSS3和HTML5能力，从而解决浏览器的兼容问题。

postCSS

使用JS插件转换样式的工具。这些插件可以删除您的CSS，支持变量和混合，最新的CSS语法，内联图像等。
在写css属性时，按照正常css属性名书写，通过postCSS命令，自动为css命名添加前缀

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

查看css属性兼容