1、浏览器兼容性

一、概要

世界上没有一任何一个浏览器是一样的，同样的代码在不同的浏览器上运行就存在兼容性的问题。

不同的浏览器的内核不尽相同，相同内核的版本不同，相同版本的内核浏览器品牌不一样，各种的运行平台还存在差异、屏幕分辨率不一样，大小不一样，比例不一样。兼容性主要可以分类为：

1、CSS兼容

2、JavaScript兼容

3、HTML兼容

二、CSS设置

1、div的垂直居中问题：vertical-align:middle;

将行距和整个div一样高：line-height:200px;

然后插入文字就居中了

缺点是要控制文字不换行

2、margin加倍的问题

设置float的div在IE下设置的margin会加倍，这是一个ie6都存在的问题。

解决方案：在这个div里面加上display：inline;

3、浮动IE产生的双倍距

#box{float:left;width:100px;margin:0 0 0 100px;/*这种情况下IE会产生200px的距离*/display:inline/*使浮动忽略*/}

block与inline两个元素：block元素的特点：总是在新行上开始，高度宽度行高和边距都可以控制（块元素）；inline元素的特点：和其它元素在同一行上，不可控制（内嵌元素）

4、IE与宽度和高度的问题

IE不认得min-这个定义，但实际上他把正常的width和height当作有min的情况来使用。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。

要解决这个问题，可以这样：#box{width:80px;height：35px}

html>body#box{width:auto;height:auto;min-width:80px;min-height:35px;}

5，页面的最小宽度

min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。

但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到 <body> 标签下，然后为div指定一个类，然后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

6、DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

<style type="text/css">
#box{ float:left; width:800px;background-color: #000066;//可以优化为#006;}
#left{ float:left; width:50%;background-color: #006600;//可以优化为#060;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
</style>
<div id="box">
<div id="left">&nbsp;</div>
<div id="right">&nbsp;</div>
</div>

7，IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域时发现内容确实在页面。

解决办法：对#layout使用lin-height属性或者给#layout使用固定的高和宽。页面结构尽量简单。

8，float的div闭合；清除浮动；自适应高度

实例1

<style type="text/css">
.float_a,.float_b,.float_c { float:left; }
.clear { clear:both; }
</style>
<div class="float_a">内容1</div>
<div class="float_b">内容2</div>
<div class="clear"></div>
<div class="float_c">内容3</div>

实例2

<style type="text/css">
.float_a,.float_b { float:left; }
.fl_l { float:left;}
.fl_r { float:right;}
.clear:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear { zoom: 1; }
</style>
<div class="clear aa">
<div class="float_a fl_l"><div class="float_a fl_r">这是内容</div></div>
</div>

作为外部 wrapper 的 div 不要定死高度，为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。

例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

9，高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding 时。例：

<style type="text/css">
#box {background-color:#eee; }
#box p {margin:20px 0; text-align:center;//原样式margin-top:20px; margin-bottom:20px; }
</style>
<div id="box">
<p>p对象中的内容</p>
</div>

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为div加上 border属性。

10，IE6下为什么图片下有空隙产生

解决这个bug的方法很多，可以是改变HTML的paiban排版，或者设置img为display:block或者设置vertical-align:top|middle|bottom|text-bottom都可以解决

11、如何对齐文本与文本输入框

加上 vertical-align:middle;
<style type="text/css">
<!-- input { width:200px; height:30px; border:1px solid red; vertical-align:middle;
//垂直方向样式是重点！} -->
</style>
<input type='text'>

12、web标准中定义id与class有什么区别吗

web标准中是不容许重复id的，比如 div id="aa" 不容许重复2次，而class 定义的是类，理论上可以无限重复，这样需要多次引用的定义便可以使用他；
属性的优先级问题 id 的优先级要高于class，看上面的例子三.方便JS等客户端脚本，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个id，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个id来得简单。

13、li中内容超过长度后以省略号显示的方法（此方法适用于IE与OP浏览器）

<style type="text/css">
<!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } -->
</style>

14、eb标准中IE无法设置滚动条颜色了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "网址">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!-- html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } -->
</style>

15、为什么无法定义1px左右高度的容器

IE6下面这个问题是因为默认行高造成的，解决方法很多，例如：overflow：hidden|zoom:0.08|line-height:1px

16、怎么样才能让层显示在Flash之上呢

给flash设置透明

 <param name="wmode" value="transparent" />

17、怎样使一个层垂直居中于浏览器中

<style type="text/css">
<!-- div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } -->
</style>

三、js兼容

1、关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题。

js通过style不可以获取行外样式，当我们需要获取行外样式时: 我们一般通过这两个方法获取行外样式：

（1）IE下: currentStyle

（2）Chrome,FF下: getComputedStyle(oDiv,false) 兼容两个浏览器的写法:

if(oDiv.currentStyle){
            alert(oDiv.currentStyle.width);
        }else{
            alert(getComputedStyle(oDiv,false).width);
        }

*注:在解决很多兼容性写法时,都是用if..else..

封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7)

funtion getStyle(obj,name){
            if(obj.currentStyle){
                //IE
                return obj.currentStyle[name];
            }else{
                //Chrom,FF
                return getComputedStyle(obj,false)[name];
            }
        }
    调用：getStyle(oDiv,'width');

2，用“索引”获取字符串每一项出现的兼容性问题

对于字符串也有类似于数组这样的通过下标索引获取每一项的值,

var str="abcde";
    aletr(str[1]);
    但是低版本的浏览器IE6,7不兼容
    兼容方法:str.charAt(i)    //全部浏览器都兼容
    var str="abcde";
    for(var i=0;i<str.length;i++){
      alert(str.charAt(i));   //放回字符串中的每一项
    }

3，DOM中 childNodes 获取子节点出现的兼容性问题

childNodes:获取子节点,

IE6-8:获取的是元素节点,正常
高版本浏览器:但是会包含文本节点和元素节点(不正常)

解决方法: 使用nodeType:节点的类型，并作出判断

nodeType=3-->文本节点
nodeTyPE=1-->元素节点

例: 获取ul里所有的子节点，让所有的子节点背景色变成红色

 获取元素子节点兼容的方法:
  var oUl=document.getElementById('ul');
  for(var i=0;i<oUl.childNodes.length;i++){
    if(oUl.childNodes[i].nodeType==1){
      oUl.childNodes[i].style.background='red';
    }
  }

注：上面childNodes为我们带来的困扰完全可以有children属性来代替。 children属性:只获取元素节点,不获取文本节点,兼容所有的浏览器，比上面的好用所以我们一般获取子节点时,最好用children属性。

var oUl=document.getElementById('ul');
oUl.children.style.background="red";

4，关于使用 firstChild,lastChild 等，获取第一个/最后一个元素节点时产生的问题

IE6-8下: firstChild,lastChild,nextSibling,previousSibling,获取第一个元素节点(高版本浏览器IE9+,FF,Chrome不兼容,其获取的空白文本节点)
高版本浏览器下: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling(低版本浏览器IE6-8不兼容)

兼容写法: 找到ul的第一个元素节点,并将其背景色变成红色

var oUl=document.getElementById('ul');
    if(oUl.firstElementChild){
      //高版本浏览器
      oUl.firstElementChild.style.background='red';
    }else{
      //IE6-8
      oUl.firstChild.style.background='red';
    }

5，关于使用 event对象，出现的兼容性问题

（1）获取鼠标位置

IE/Chrom: event.clientX;event.clientY
FF/IE9以上/Chrom: 传参ev--> ev.clientX;ev.clientY

（2）获取event对象兼容性写法:

       var oEvent==ev||event;
        document.oncilck=function(ev){
            var oEvent==ev||event;
            if(oEvent){
                alert(oEvent.clientX);
            }
        }

6，关于为一个元素绑定两个相同事件：attachEvent/attachEventLister 出现的兼容问题。

事件绑定:(不兼容需要两个结合做兼容if..else..)

IE8以下用: attachEvent('事件名',fn);
FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false);

多事件绑定封装成一个兼容函数:

    function myAddEvent(obj,ev,fn){
      if(obj.attachEvent){
        //IE8以下
        obj.attachEvent('on'+ev,fn);
      }else{
        //FF,Chrome,IE9-10
        obj.attachEventLister(ev,fn,false);
      }
    }
    myAddEvent(oBtn,'click',function(){
      alert(a);
    });
    myAddEvent(oBtn,'click',function(){
      alert(b);
    });

7，关于获取滚动条距离而出现的问题

当我们获取滚动条滚动距离时:

IE,Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop 兼容处理:

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop