浏览器兼容性问题解析-优快云博客

什么是浏览器兼容问题？

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

为什么会出现浏览器兼容问题？

浏览器兼容问题的出现，是因为各个浏览器对W3C标准支持的程度不同而导致的。如果网页都是一个标准的话，也不会又这种问题，但微软把自己当成了标准，不遵循网页的规范，所以一些网页即使语法错误也会在IE正常显示，而在FF，谷歌浏览器等不同内核的浏览器中出现“兼容问题”，其实是网页不遵循Web标准。

当前主浏览器的核心是什么？

1) Trident：IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE7。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如 Maxthon、TheWorld 、TT、GreenBrowser、AvantBrowser等）。

2) Geckos： Netcape6开始采用的内核，后来的FF也采用了该内核，Geckos的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。

3) Presto：目前Opera采用的内核，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。

4) Webkit：Safari浏览器使用的内核。Google的Chrome浏览器也是采用Webkit。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器还是比较安全的浏览器。

我整理的一些实例，都是在谷歌、IE7、IE8、IE9、IE10、FF中测试过。

实例：

2015.01.12
1、window.event
谷歌、IE：有window.event对象
FF等dom中：没有window.event对象。可以通过给函数的参数传递event对象。
onclick=click(event) ;

2、
问题描述: 有时我们需要给标签一个极端的高度或者宽度
        比如用来做小型按钮或者是通过背景渐变的方式来制作带有
        渐变效果的分割线等等……然而浏览器对最小高度和宽度的
        识别都存在不同的兼容性差异，导致实际高度或宽度要多出
        你本身所设置的宽度或高度
在ie中当设置的高度比较矮时，会默认一个高度的

解决方案一：给超出高度的标签设置overflow:hidden
        div{
            overflow:hidden
        }

        解决方案二：给标签设置line-height行高，高度小于标签本身高度
        大刀王五亲测IE6，IE7下此方案无效，IE8后奏效
        div{
            line-height: 5px;
        }

3、
伪类选择器在css中比较方便实用，但是在IE中伪类选择器有一个空格符的兼容性问题
        IE5,IE7,IE8,IE9,谷歌,火狐,opera都是正常的
        IE6中没有样式
        IE5,IE6不识别:first-child伪类

解决方法
IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符”-”，
伪类名称后面就得跟一个空格，不然样式的定义就无效。

例如：
p:first-letter {font-size:300%}

4、浮动问题
双倍浮动

.div2{
            margin-left: 200px;
            width: 300px;
            height: 300px;
            border: 1px solid #6342ff;
            float: left;
            //display: inline;
        }
解决方案：加上display: inline;

5、boder问题
在ie中boder的宽高的值是算在div里的
解决方案：
.head{
                width: 200px;
                height:200px;
                /*background: red;*/
                /*padding:50px;*/
                border: 50px solid blue;
                /*支持IE5,IE6*/
                _width:300px;
                _height:300px;
                /*支持IE6,IE7,IE8*/
                width: 200px\9;
                height:200px\9;
            }

2015.01.13

6、hover问题
在IE6中，需要有href属性才能触发:hover行为，这妨碍了我们实现许多鼠标触碰效果，但还是有一些法子是可以解决它的。最好是不要用:hover来实现重要的功能，仅仅只用它来强化效果。
解决方案：加一个href属性
<style>
        .div1,a{
            display: inline-block;
            width: 200px;
            height: 200px;
            background: gray;
        }
        /*.div1:hover{*/
            /*background: red;*/
        /*}*/
       a:hover{
            background: red;
        }
    </style>
<div class="div1">
        <a href="">鼠标移动上来</a>
    </div>
</body>

7、min-height的问题
在ie中不能识别，
解决方案：直接用height，weight来设置

8、opacity问题

2015.01.14
9、font-family的问题
font-family: Arial,"黑体","华文行楷"
IE6,7,8只能识别font-family设置的第一个字体，chrome,firefox都能识别
被设置字体的文字(区别中英文)从font-family的第一个开始依次往后找它应该设置的样式，找到即止。

10、overflow的问题
在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素
解决方案： position: absolute

11、innerText获取值的问题
innnerText在火狐的不支持，所以在火狐中用textContent，但textContent在ie6-ie8不支持
解决方案：先判断浏览器的内核
alert(navigator)
火狐，谷歌ie11，ie10,ie9,ie8下alert(navigator);为object Navigator，ie7,ie5下为object，这是window下的对象

12、高度不适应:当内层对象的高度发生变化时外层高度不能自动进行调节,特别是加了margin之后(这个不算兼容性问题，在这个案例中p标签本身就自带margin)
#box{
            background-color: red;
           // border: 1px solid;
        }
        #box p {
            margin-top: 20px;
            margin-bottom: 20px;
            text-align: center;
        }

13、子div撑大父div的问题
在ie6中子div会撑大父div，而在dom中子div会溢出
解决方案：在父级中设置
overflow:hidden;
position:absolute
在子级中设置
position:absolute