浏览器兼容性问题

一、浏览器兼容性

浏览器兼容性是指网页在各种浏览器下显示的效果不一致和在各种浏览器下web功能实现不一致而产生的网页间兼容性问题。

二、产生原因

因为不同浏览器使用内核及所支持的HTML等网页语言标准不同。最常见的问题就是网页元素位置混乱、显示错位、功能在不同浏览器下不能显示一致。

三、问题解决方案

1         最笨但也是最简单的方法，根据浏览器名称进行判断，然后在其浏览器名称下进行兼容性修改

l   区分IE浏览器和其他浏览器下的兼容性操作

例：

l   根据浏览器名称进行判断然后进行兼容性操作

例：

2         很多情况下，我们并不用这么麻烦的去检查客户端打开的是哪种浏览器，我们可以做出兼容性写法，既保证了代码的简约优化，又可以使各浏览器之间的样式以及功能保持一个很好的兼容性。

?  Js功能兼容性问题的解决

l   获取页面内的iframe，IE和Firefox会出现兼容性问题

通用写法：document.getElementById(id).contentDocument || document.frames[id].document;

l   获取父节点

IE中支持parentElement和parentNode，火狐中只能用parentNode

通用写法：obj. parentNode

l   鼠标当前坐标

IE中的当前坐标为：event.x和event.y

FF中的当前坐标为：event.pageX和event.pageY

通用写法：event.clientX和event.clientY

l   事件源

IE中是：event.srcElement

FF中是：event.target

通用写法：var obj = event.srcElement ?  event.srcElement : event.target ;

l   对象的x和y坐标位置

通用写法：object.offsetLeft和object.offsetTop

l   页面链接

IE和FF的某些版本下可以使用window.location.href和window.location

但FF也有些版本不支持window.location.href

通用写法：使用window.location

 

?  样式兼容性问题的解决

l   页面布局

经常发现页面里含有多个div，而大的div内又含有一些其他元素，所以经常因为定位写法不兼容导致页面元素错位。

解决方案：早期我们用html的架构标签frameset，但frameset的缺点逐渐缺点暴露，被网页设计者所抛弃。所以当出现div错乱情况时，可以用table很好的布局，并且table在每个浏览器里是不会出现错位的。

当然，table的主要用途是体现数据，所以到了特殊情况下在用它来布局吧。

l   checkbox、小图片与后面说明文字对不齐

经常会遇见复选框或者小图片与后面的说明文字对不齐的情况

解决方案：<input type=’checkbox’ sytle=’vertical-algin:middle’/><label>男</label>

          <img style=’vertical-align:middle’>说明文字

l   文字大小本身不兼容

同样是大小14px的宋体文字，不同浏览器下占用空间不一样。

解决方案：给文字设定line-height,确保所有文字都有默认的line-height值

l   margin值成倍出现

给浮动容器定义margin-left或margin-right时，IE6下会出现实际显示的值是设定值的两倍。

解决方案：给浮动容器设定display:inline

l   鼠标手指

cursor:pointer可以同时在IE   FF下鼠标指针显示手指状，而hand仅IE可以