常见的浏览器兼容问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liuwengai/article/details/51763670

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 */

<!--[if
 IE 6]>此处内容只有IE6.0可见<![endif]-->

<!--[if
 IE 7]>此处内容只有IE7.0可见<![endif]-->

参考文章:

http://blog.csdn.net/chuyuqing/article/details/37561313/

http://blog.csdn.net/liuwengai/article/details/51678821

展开阅读全文

没有更多推荐了,返回首页