爱创课堂 冯楠娜 浏览器兼容性问题与解决方案

浏览器兼容性问题与解决方案

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

做兼容页面的通常方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题三：设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度

问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

问题五：图片默认有间距

问题六：标签最低高度设置min-height不兼容

 

　　　　　　　　　　                 　-----以上摘自    http://developer.51cto.com/art/201008/218335.htm

 

 

 

解决方案：通过书写专门针对各浏览器的hack解决以上兼容问题。

浏览器的hack主要分为三类

 

　　1.css值的hack 

 

　　2.css选择器的hack

 

3.针对IE的在html文件内的 <!--[ if IE 8]><style>...</style><![endif]-->

 

①首先我们先来看css 值的hack:

　　Selector {property:value\9;}    //IE9及以下的浏览器

 

　　Selector {property:value\0/;}    //IE8,9

 

　　Selector {!property:value;}     //IE6,7

 

　　Selector {_property:value;} 或者 Selector {-property:value;}   //IE6

 

②css选择器的hack　

 

 //只有firefox识别

@-moz-document url-prefix() { 

 

　　       .selector {

              property: value;

　　       }

}

 

//针对Webkit内核的浏览器，如Google Chrome 和      Safari   

@media screen and (-webkit-min-device-pixel-ratio:0){ 　　

       Selector { property: value; }

}

*html#uno{color:red}    // IE6及一下

*:first-child+html#dos{color:red}// IE7

 

③针对IE的在html文件内的 <!--[ if IE]><style>...</style><script>...</script><![endif]-->

 

针对IE的css和javascript都可放在里面执行

 

//针对所有IE浏览器

<!--[ if IE]><style>...</style><script>...</script><![endif]-->  

 

//针对IE某个浏览器，这里时针对IE8

<!--[ if IE 8]><style>...</style><script>...</script><![endif]-->     

 

//针对IE8以下浏览器

　   <!--[ if lt IE 8]><style>...</style><script>...</script><![endif]-->    

 

//针对IE8及以下浏览器

 　  <!--[ if lte IE 8]><style>...</style><script>...</script><![endif]-->

 

//针对IE8以上浏览器  

　　<!--[ if gt IE 8]><style>...</style><script>...</script><![endif]-->    

 

//针对IE8及以上浏览器

 　  <!--[ if gte IE 8]><style>...</style><script>...</script><![endif]-->