浏览器兼容问题及处理方法

什么是浏览器兼容

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示，给用户更好的体验。

常见的几种浏览器兼容问题及解决办法

• 不同浏览器标签的内外边距不一样，即padding和margin值不一样。
  解决办法：在css内下上*{margin：0；padding：0}

• 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
  问题描述：我们最常用的就是div+CSS布局了，而div就是一个典型的块元素标签，我们想实现让块元素横向布局的时候，通常是使用float让他们在一行显示，这时候如果使用margin的时候，在IE6中显示的margin值要比实际的margin值大。
  解决办法：在使用float属性的标签内加上display:inline将其转化为行内元素。

• 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
  问题描述：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
  解决办法：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

• 行内属性标签，设置display:block后采用float布局，又有横向的margin的情况，IE6里的间距比超过设置的间距
  问题描述：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。
  解决办法：在display:inline后面加入display:talbe。

• 几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
  问题描述： 因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。
  解决办法：使用float属性为img布局。

• 阻止冒泡的兼容
  问题描述：多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果里面的元素的事件触发了则外面元素的事件也会依层触发。
  解决方法：if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; }前者是阻止非IE浏览器的冒泡问题，后者是阻止IE浏览器的冒泡问题。

• 阻止默认行为的兼容
  问题描述：w3c的方法是：e.preventDefault()　　 IE浏览器的方法是：e.returnValue=false
  解决办法：在需要阻止的默认事件中把两句话都写上，或者直接在最后加一个 return false

• 添加事件监听器的兼容
  解决方法：if(target.addEventListener){ target.addEventListener("click",fun,false); }else{ target.attachEvent("onclick",fun); }IE浏览器添加事件监听器的语法是attachEvent，非IE浏览器使用的是addEventListener。

• 解除事件监听器的兼容
  解决方法：if(target.removeEventLisener){ target . removeEventListener(“click” , fun , false); }else{ target . detachEvent(“onclick”, fun); }

• 浏览器的透明度问题
  问题描述：IE8以下的浏览器不支持opacity属性。
  解决方法：IE8一下浏览器的写法：元素：alpha(opacity=val)val取值范围是1-100.
  　　　　　非IE浏览器的写法：opacity：valval 取值范围是0-1