常见的浏览器兼容性问题

1. 不同浏览器的标签默认外补丁margin和内补丁padding不同

发生概率：100%

解决方案：使用CSS通配符*，设置内外补丁为0

*{ margin: 0; padding: 0;}

2. 块属性标签float之后，又有横向的margin值，在IE6中显示会比设置的大（IE6双边距bug）

发生概率：90%

   解决方案：在float标签样式控制中加入display:inline;

3. 设置较小的高度标签（一般小于10px），在IE6，IE7，遨游中超出自己设置的高度

发生概率：60%

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。

4. 行内标签设置display:block;后又采用float布局，再设置横向margin值时，在IE6中显示会比设置的大（IE6双边距bug）

发生概率：20%

解决方案：在display:block;后面加上display:inline;display:table;

5. 图片默认有间距

发生概率：20%

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

6. 标签最低高度设置min-height不兼容

发生概率：5%

解决方案：例如要设置一个标签的最小高度为200px

{ min-height: 200px;

 height: auto!important;

height: 200px;

overflow: visible;}

7. 透明度兼容设置

发生概率：主要看你要写的东西设不设透明度

解决方案：一句话

transparent_class {   

    filter:alpha(opacity=50);   

       -moz-opacity:0.5;   

       -khtml-opacity: 0.5;   

       opacity: 0.5;   

 } 

8. Box Model的bug

描述：给一个元素设置了高度和宽度的同时，还为其设置margin和padding的值，会改变该元素的实际大小。

解决办法：在需要加 margin和padding的div内部加一个div,在这个div里设置margin和padding值。

9. IE6中的列表li楼梯状bug

描述：通常在li中的元素（比如a）设置了浮动float，但li本身不浮动。

解决办法：

ul li{float:left;}

或 ul li{display:inline;}

10.li空白间距

描述：在IE下，会增加li和li之间的垂直间距

解决办法：给li里的a显式的添加宽度或者高度

li a{width:20px;}

或者

li a{display:block;float:left;clear:left;}

或者

li {display:inline;}

li a{display:block;}

或者

在每个列表li上设置一个实线的底边，颜色和li的背景色相同

11.overflow：auto;和position:relative的碰撞

描述：此bug只出现在IE6和IE7中，有两个块级元素，父元素设置了overflow：auto;子元素设置了position:relative;且高度大于父元素，在IE6-7中子元素不会被隐藏而是溢出。

解决方案：给父元素也设置position:relative;

12.浮动层的错位

描述：当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7、IE8及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题。

解决方案：overflow：hidden;

13.IE6克隆文本的bug

描述：若你的代码结构如下

<!--这是注释-->

    <div>

       ……

   </div>

<!--这是注释-->

很有可能在IE6网页上出现一段空白文本

解决方案：

使用条件注释

删除所有注释

在注释前面的那个浮动元素加上 display：inline；

14.IE的图片缩放

描述：图片在IE下缩放有时会影响其质量

解决方案：img{ -mg-interpolation-mode:bicubic;}

15.禁用IE默认的垂直滚动条

解决方案：

html{

   overflow:auto;

}

JS的兼容性问题：

1.获取滚动条垂直方向滚动距离：

document.documentElement.scrollTop||document.body.scrollTop

2.获取样式兼容

function getStyle(dom, styleName){

return dom.currentStyle?

dom.currentStyle[styleName] :getComputedStyle(dom)[styleName];}

3.网页可视区域兼容

window.innerHeight || document.documentElement.clientHeight

window.innerWidth || document.documentElement.clientWidth

4. 事件对象兼容

e  = e || window.event;

这里函数传入的参数e，就是事件，浏览器会实时跟踪用户的行为。

如e.screenX、e.screenY、e.offsetX、e.offsetY…这种做法在FireFox、Chrome、Safari等遵循W3C规范的浏览器下是没有问题的。

唯独在IE下是行不通的， IE采用了一种非标准的方式，将事件作为window对象的event属性：window.event、window.event.screenX…

5. 阻止事件冒泡兼容

event.stopPropagation? event.stopPropagation():event.cancelBubble=true;

说明：前者是方法，是标准的写法，后者是属性，赋值true表示阻止，是IE的写法。

解决方法：判断stopPropagation是否存在，如果存在则用标准写法否则则用IE的写法，不可反过来判断。

6.阻止默认行为兼容

evt.preventDefault?evt.preventDefault():evt.returnValue=false;

说明： preventDefault()和returnValue()前者标准写法，后者IE写法。
解决方法：一般情况建议直接使用return false阻止，但和取消默认事件的含义是不同的。

7.事件监听兼容

说明：标准浏览器的写法addEventListener()和IE的写法attachEvent()。

解决方法：判断addEventListener是否存在，如果存在则用否则用IE8以下的版本（含IE8）的绑定方法attachEvent，removeEventListener()和detachEvent()也是一样的用法。

8.事件目标对象兼容

var src = event.target || event.srcElement;

说明： IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。

解决方法：使用var src = event.target || event.srcElement;来代替IE下的event.srcElement或者Firefox下的event.target，请同时注意event的兼容性问题。