浏览器的兼容性

浏览器兼容性理论知识

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

[基础知识]

CSS Hack大致有3种表现形式：CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack；

类内部Hack：比如 IE6能识别下划线\"_\"和星号\" * \"，IE7能识别星号\" * \"，但不能识别下划线\"_\"，而firefox两个都不能认识。等等；

选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等；

HTML头部引用(if IE)Hack：针对所有IE：，针对IE6：，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

我们最常用的是类内部Hack，使用hacker 时可以把浏览器分为3类：ie6 ；ie7；其他（ie8 ie9 chrome ff safari opera等）;

在写css时样式表加上浏览器标识符，就可以兼容各个浏览器。各个浏览器区别如下： IE都能识别*,\\9，标准浏览器（如FF）不能识别*； IE6能识别*，_，但不能识别 !important； IE7能识别*,+，也能识别 !important； IE8能识别\\0，不能识别*，+,_,*加!important; FF不能识别*，但能识别 !important； :root 选择符 {属性\\9;} IE9特有的兼容性写法， 例如：:root .test{background-color:purple\\9;}

FF专属Hack:

@-moz-document url-prefix(){ #firefox{display:block;color:#00f;} }

Opera专有Hack：

Css: @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){ head~body .sampleCss{ height:10px;}} 例如：

.content{paddng-top:30px;}

@media all and (-webkit-min-device-pixel-ratio:10000), not all and

(-webkit-min-device-pixel-ratio:0){ head~body .content{padding-top:4px;}}

Safari和chrome专有Hack：

@media screen and (-webkit-min-device-pixel-ratio:0){ #safari{display:block;} }

注意：由于浏览器的解析顺序为从上到下，从左到右，并且有的css hack能识别多个浏览器，所以书写顺序是很重要的，不管是什么方法，书写的顺序都是FF的写在前面，IE7的写在中间，IE6的写在最后面；

可综合上述各个浏览器兼容性的规律灵活应用，其中我们最常见的写法是： width:100px; /* FireFox及其他浏览器 */ width:200px\\0; /* IE8能识别\\0*/ *width:300px; /* IE7也能识别*号 */ _width:400px; /* IE6能识别下划线*/