浏览器兼容问题

什么是浏览器兼容问题？

百度百科：浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

产生浏览器兼容问题的原因？

不同的浏览器使用的内核及所支持的HTML等网页语言标准不同；
用户客户端所处的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。

针对不同的问题，解决方案有哪些？

1.CSS Hack

IE6认识的hacker 是下划线_ 和星号 *

IE7 、遨游认识的hacker是星号 *

比如这样一个CSS设置：

/* 注意书写次序 */
height:300px;
*height:200px;
_height:100px;

IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt，所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；

IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

/* 针对 IE 6的专属CSS Hack网站设计代码 */
#id{
    _display:block;
}

/* 针对 IE 7的专属CSS Hack网站设计代码 */
#id{
    *display:block;
}

/* 针对 IE 8的专属CSS Hack网站设计代码 */
#id{
    margin-top: 10px 9; /* IE8 */
}

/* 针对火狐的专属CSS Hack网站设计代码 */
@-moz-document url-prefix(){
    #id{
        margin-top: 10px 9; /* IE8 */
    }
}

/* 针对Safari的专属CSS Hack网站设计代码 */
@media screen and (-webkit-min-device-pixel-ratio:0){
    #id{
        margin-top: 10px 9; /* IE8 */
    }
}

/* 针对Opera的专属CSS Hack网站设计代码 */
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0){
    head~body #id{
        margin-top: 10px 9; /* IE8 */
    }
}

2.不同的浏览器不加样式控制的情况下，各自的margin和padding差异较大

解决方案：

 *{
    margin:0;
    padding:0;
}

3.float后又有横向margin，不同浏览器margin设置可能能比较大，后面的一块被顶到下一行

解决方案：在float的标签样式控制中加入 diaplay:inline; ,将其转换为行内属性。

4.ie6、7和遨游里标签的高度不受控制，超出自己设置的高度

解决方案：

给超出高度的标签设置 overflow: hidden; ；
设置 line-height 小于设置的高度。

5.最低高度设置 min-height 不兼容

解决方案：

min-height: 200px;
height: auto !important;
height: 200px;
overflow: visible;

6.点击事件

<body>
    <a href="#" onclick="doSet1(event);">点一下</a> 
    <a href="#" onclick="doSet2(event);">点两下</a> 
</body>
<script type="text/javascript">
    function doSet1(event) {
        alert(event.target.innerHTML);
    }
    function doSet2(event) {
        alert(event.srcElement.innerHTML);
    }
</script>

在IE需要点击‘点两下’，而在Firefox需要点击‘点一下’，内核不同，一些内置对象的属性名称不一致，所以相同的js脚本在某个浏览器下不一定能用。

解决方案：使用jQuery，jQuery内部已经实现了屏蔽浏览器差异。

7.透明度兼容设置

transparent_class {   
    filter:alpha(opacity=50);   
    -moz-opacity:0.5;   
    -khtml-opacity: 0.5;   
    opacity: 0.5;   
 }

opacity: 0.5; 它是CSS中的当前标准，在大多数版本中起作用。如果所有浏览器都支持当前的标准，则这将是您所需要的。当然，他们不这样做。

filter:alpha(opacity=50); 用于IE

-moz-opacity:0.5; 支持老式的Mozilla浏览器版本，比如Netscape Navigator。

-khtml-opacity:0.5; 旧版本的Safari（1.x），当它正在使用的引擎出现时仍然被称为KTHML，反对当前的WebKit。

8.input边框问题

解决方案：

border: 0;

border: 0 none;

border: none;
border-color: transparent;

参考：http://blog.csdn.net/gaoqiang1112/article/details/77891969