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的兼容性问题。