常见的浏览器兼容问题

曾经终败给现在 2022-09-22 03:46 279阅读 0赞

**1.浏览器和内核**

目前有很多浏览器，而且浏览器的内核也不相同，因此浏览器对网页的解析就有一定出入，这就导致了浏览器的兼容问题。

使用Trident内核的浏览器：IE、Maxthon、TT；

使用Gecko内核的浏览器：Netcape6及以上版本、FireFox；

使用Presto内核的浏览器：Opera7及以上版本；

使用Webkit内核的浏览器：Safari、Chrome。

**2.浏览器兼容**

浏览器兼容分为html,css,javascript兼容。

html兼容问题主要是新的html5增加了许多新的标签，但是低版本的浏览器不支持。

javascript兼容主要是各个浏览器对事件的支持有很大问题。

1.  不同浏览器标签默认的margin和padding差异很大

**解决方案**

*{ margin:0; padding:0; }

对浏览器的默认内边距和外边距设置，防止不同浏览器出现不同的效果。

2.IE6的书安倍边距BUG，块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大

问题：在IE6下如果某个标签使用了float属性，同时设置了其外补丁“margin:10px 0 0 10px”可以看出，上边距和左边距同样为10px，但第一个对象距左边有20px。

\*\*出现条件：\*\*block元素+浮动+margin。

在IE6中一行中的最后一块被放到了下面的一行。

**解决方案：**

在float标签样式控制中加入 display:inline，将其转化为行内属性。

**为什么第二个对象和第一个对象之间就不存在双边距？**

因为浮动都有其相应的对象，只有相对于其父对象浮动，才会出现这样的问题。第一个对象是相对于父对象的，而第二个对象是相对于第一个对象的。所以第二个对象在设置后不会出现问题。

3.设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超过了自己设置的高度

出现这个问题的原因是IE8之前浏览器会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

**解决方案：**

给超出高度的标签设置overflow:hidden，或者设置行高line-height小于你设置的高度。

4.行内属性标签，设置display:block后采用float布局，又有横行的margin情况（IE6里的间距超过设置的间距）

**解决方案：**

在display：block后面加入display:inline;display:table  
行内属性的标签，为了设置宽高，设置显示为块元素，用float布局并有横向的margin后，在IE6下，具有了块属性浮动后的横向margin问题。不过因为它本身属于行内属性标签，所以加上display：inline的话，它的宽高就不可设了。这时还需要在后面加上display:table

5.图片有默认的间距（几个img标签放在一起的时候，有些浏览器会有默认的间距，设置了通配符也不起作用）

**解决方案：**

使用float属性为img布局

因为img标签是行内属性的标签，所以只要不超过容器宽度，img标签都会排在一行里。但是部分浏览器的img标签之间有个间距。去掉这个间距使用float是正道。

6.标签最低高度设置min-height不兼容

**解决方案：**

如果我们要设置一个标签的最小高度200px；需要进行的设置为：

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

当内容小于一个值（如300px）时，容器的高度为300px，当内容的高度大于这个值的时候，容易高度被撑高，而不是出现滚动条。

7 css盒子模型在IE6下解析问题

**元素内容占据的空间是由 width 属性设置的，**而内容周围的 padding 和 border 值是另外计算的。IE6 在怪异模式中使用自己的非标准模型。这些浏览器的 **width** 属性不是内容的宽度，而是**内容、内边距和边框的宽度**的总和。

**解决方案：**

不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

8.javascript兼容性问题

① 在标准的事件绑定中**绑定事件**的方法函数为 addEventListener,而IE使用的是attachEvent

② 标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值。

③ 事件处理中非常有用的event属性获得亦不相同，ie是window.event方式获得，获得目标元素ie为e.srcElement 标准浏览器为e.target

④ 然后在ie中是不能操作tr的innerHtml的

⑤ 然后ie日期函数处理与其它浏览器不大一致，比如： var year= new Date().getYear(); 在IE中会获得当前年，但是在firefox中则会获得当前年与1900的差值。

⑥ 获得DOM节点的方法有所差异，其获得子节点方法不一致。

IE：parentElement parentElement.children  
Firefox：parentNode parentNode.childNodes  
childNodes的下标的含义在IE和Firefox中不同，Firefox使用DOM规范，childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。

当html中节点缺失时，IE和Firefox对parentNode的解释不同。例如:

`<form> <table> <input/> </table> </form>`  
IE：input.parentNode的值为空节点  
Firefox：input.parentNode的值为form  
解决方法：Firefox中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

因为我们开发过程中一般都会使用类库，若是不使用，都会自己积累形成一个类库，所以就js而言，兼容性问题基本解决了。

9.css的hack知识点

/* CSS属性级Hack */
    
    color:red;
     /* 所有浏览器可识别*/
    
    _color:red;
     /* 仅IE6 识别 */
    
    *color:red;
     /* IE6、IE7 识别 */
    
    +color:red;
     /* IE6、IE7 识别 */
    
    *+color:red;
     /* IE6、IE7 识别 */
    
    [color:red;
     /* IE6、IE7 识别 */
    
    color:red\9;
     /* IE6、IE7、IE8、IE9 识别 */
    
    color:red\0;
     /* IE8、IE9 识别*/
    
    color:red\9\0;
     /* 仅IE9识别 */
    
    color:red
     \0; /* 仅IE9识别 */
    
    color:red!important;
     /* IE6 不识别!important 有危险*/
    
    /* CSS选择符级Hack */
    
    *html
     #demo { color:red;} /* 仅IE6 识别 */
    
    *+html
     #demo { color:red;} /* 仅IE7 识别 */
    
    body:nth-of-type(1)
     #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
    
    head:first-child+body
     #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
    
    :root
     #demo { color:red\9; } : /* 仅IE9识别 */
    
    /* IE条件注释Hack */

参考文章：

[http://blog.csdn.net/chuyuqing/article/details/37561313/][http_blog.csdn.net_chuyuqing_article_details_37561313]

[http://blog.csdn.net/liuwengai/article/details/51678821][http_blog.csdn.net_liuwengai_article_details_51678821]

[http_blog.csdn.net_chuyuqing_article_details_37561313]: http://blog.csdn.net/chuyuqing/article/details/37561313/
[http_blog.csdn.net_liuwengai_article_details_51678821]: http://blog.csdn.net/liuwengai/article/details/51678821