对兼容性的认识

来源：互联网发布：西北师大知行学院分布编辑：程序博客网时间：2024/05/20 14:16

谈一谈浏览器的兼容性问题

css兼容性问题

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

在学习浏览器兼容性之前，我想把前端开发人员划分为两类：

第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。

第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。

我们在谈兼容性问题主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题

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

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大。

解决方案：CSS里 *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

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

问题症状:常见症状是IE6中后面的一块被顶到下一行

稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题

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

备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题

浏览器兼容问题三：图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

浏览器兼容问题四：div嵌套p时，出现空白行

问题：

div中显示<p>文本</p>，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。

解决：

设置p的margin:0px，再设置div的padding-top和padding-bottom

除去默认滚动条的问题

问题：

隐藏滚动条

解决：

1、只有ie6-7支持<body scroll="no">

2、除ie6-7不支持 body{overflow:hidden}

3、所有浏览器 html{overflow:hidden}

js兼容性问题

在标准的事件绑定中绑定事件的方法函数为 addEventListener,而IE使用的是attachEvent，所以我们会先去判断有没有addEventListener，如果有就直接使用，如果没有就再去处理

事件处理中非常有用的event属性获得亦不相同，标准浏览器是作为参数带入，而ie是window.event方式获得，获得目标元素ie为e.srcElement 标准浏览器为e.target 这在进行移动端手指端触摸滑动时间的时候会用到event事件

document.onclick =function (evt) {

//console.log(event);//主流浏览器

vare =evt || window.event;

console.log(e);

};

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

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

获取样式的时候getComputedStyle（其他浏览器）与currentStyle（IE）

//封装获取计算后样式属性值的兼容函数

functiongetStyle(obj,attr) {

if (window.getComputedStyle) {

returnwindow.getComputedStyle(obj,null)[attr];

}else {

returnobj.currentStyle[attr];

} }

阅读全文

0 0