浏览器之间的兼容问题

各个浏览器之间的兼容性问题，同样的HTML5和CSS5样式，但是浏览器表现的效果不一样。 一，什么兼容性问题，不正常的原因是什么？，应该怎么样让浏览器显示正常。 二，为什么浏览器会存在兼容性的问题？ 1，同一个浏览器，版本越老存在的bug越多，越新的版本，对新标签和新的属性，新的特性支持越少。 2，不同的浏览器，核心技术不一样，标准不同，实现的方式也有差异，最终的效果也有差异。 三，处理兼容性问题的思路 one，要不要做？ 1，从产品的角度，(产品的受欢迎程度，受欢迎浏览器的比例，效果优先还是基本功能优先？) 2，成本的角度，(有没有必要做一些功能？) two，做到什么程度？ 1，让那些浏览器支持那些效果？ three，如何做？ 1，根据兼容需求选择技术框架，(jquery)等。 2，根据兼容需求选择兼容工具：html5shiv，Respond.js，CSS Reset，normalize.css，Modernizr.js，postcss， 3，条件注释，CSS hack，js能力检测做一些修补。 四，渐进增强和优雅降级 1，渐进增强：针对低版本的浏览器构建页面，保证基本功能，对高版本的浏览器，进行效果交互，和追加功能达到最好的用户体验。 2，优雅降级：一开始就构造完整的功能，然后对低版本的浏览器进行兼容处理。 。。。。。。 具体方法如下： 1，IE条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码，注意：只有IE9以下的浏览器才能识别这种语法，其他浏览器仅仅认为是普通注释。 使用了条件注释的页面在IE9 及以前 中可正常工作，但在IE10 以后不再支持。 。。。。。。 2，CSS hack是利用浏览器遗留 bug 的原理来识别旧的浏览器。 .box{ color: red; _color: blue; /*只有IE6认识*/ *color: pink; /*只有IE67认识*/ color: yellow\9; /*IE浏览器都能识别*/ } 以下是一些常见属性的兼容情况 inline-block: >=IE8 min-width/min-height: >=IE7 :before，:after: >=IE8 div:hover: >=IE7 inline-block: >=IE8 background-size: >=IE9 圆角: >= IE9 阴影: >= IE9 动画/渐变: >= IE10 一些兼容写法范例： .clearfix:after{ content: ”; display: block; clear: both; } .clearfix{ *zoom: 1; /* 仅对IE6/IE7有效，zoom:1触发hasLayout,起到类似BFC的效果 */ } .target{ display: inline-block; *display: inline; /*仅对IE67生效*/ *zoom: 1; /*仅对IE67生效*/ } 。。。。。。 ⑴可以针对不同的浏览器写CSS，针对不同的浏览器写不同的CSS 代码的过程，就叫CSS hack CSS Hack的原理是什么？由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。 比如 IE6能识别下划线”_”和星号” * “，IE7能识别星号” * “，当不能识别下划线”_”，而firefox两个都不能认识。等等 举个例子吧，设置背景颜色的代码，区别FF，IE7，IE6：background:orange，*background:green !important，*background:blue; 注：IE都能识别*，标准浏览器(如FF)不能识别*； IE6能识别*，但不能识别 !important, IE7能识别*，也能识别!important; FF不能识别*，但能识别!important; 所以，FIREFOX中是橙色，IE7是绿色，IE6中是蓝色。 最后说一句，浏览器优先级别：FF