2024年3月24日发(作者：)
浏览器兼容性理论知识
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页
面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看
我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前
端开发人员经常会碰到和必须要解决的问题。
[基础知识]
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:purple9;}
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:200px0; /* IE8能识别0*/
*width:300px; /* IE7也能识别*号 */
_width:400px; /* IE6能识别下划线*/
发布评论