1.布局错误的解决
1.如果错误影响了整体布局,则可以逐个删除div块,知道删除某个div块后,显示恢复正常,即可确定错误发生的位置
2.使用float属性时,可以先添加border确定元素边界,布局完成后再删除
3.float元素的父元素,不能指定clear属性
4.字体大小为奇数的边框,边框height或line-height应该设置为偶数
5,父奇>>子奇 ,父偶>>子偶
2.找兼容性问题bug导致原因的几个常用方式
1.直接添加边框
2.使用开发人员工具条中的轮廓选项
3.使用其中一个bookmarklet来给不同元素加轮廓
4.尝试修改几个属性,看看他们对bug有怎样的影响,尝试扩大bug的影响有助于找到bug导致原因。
例如:在IE中的空白边比预想的大,尝试增大空白边margin-right的值,如果空白边加倍,则遇上了IE的双空白边浮动bug
5.将position的属性设置为relative
6.display属性设置为inline(浮动元素)
7.设置高度或者宽度
3.总结的IE6兼容性问题
1.div的垂直居中问题vertical-align:middle;
解决方法:将行距增加到和整个div一样高,line-height:XX px;
缺点:不能换行
2.ie6怪异模式下padding与border算入行高
解决方法:加文档声明<!doctype>
3.双空白边(两倍像素),有与float方向相同的margin时(例如:float:left和margin-left同时出现)
ie6下块元素、左右浮动、设定margin时造成margin双倍
解决方法:display:inline;
4.内部和模型超出父级时,父级撑大
解决方法:overflow:hidden
5.行标签之间有一小段空白
解决方法:float:left
6.line-height有默认值
解决方法:给line-height设值
7,.浮动元素margin-bottom失效(margin-bottom和float不能同时作用在同一标签上)
解决方法:设置高度,
或给父标签设置padding-bottom代替子标签,
或加一个父元素的包裹元素,让父元素浮动代替子元素浮动
8.img在块元素中,底边多出空白
解决方法:父级设置overflow:hidden
或img{display:block}
或_margin:5px;
9.li之间会有间距
解决方法:float:left;
10.块元素中有文字及右浮动的行元素,行元素换行
解决方法:将元素置于块元素内的文字前
11.position下的left,bottom错位
解决方法:为父级(relative层)设置宽高
或添加*zoom:1(zoom:1的作用是,触发IE的hashayout,解决IE下的margin重叠,解决IE下的浮动bug)
12.子元素中设置了position,则父元素的overflow失效
解决方法:为父级设置relative
13.png半透明
解决方法:放弃使用或使用js
14.ie6下的圆角
解决方法:用图片,请参考我的另一篇博文
15.如果给链接、按钮用css sprites作为背景,ie6下有背景图闪烁的现象(原因:每次触发hover时,会重新加载背景图)
解决方法:document.exeCommand("BackgroundImageCache",false,true);
16.ie6不支持min-height属性,但它却认为height就是最小高度
解决方法:#id{
min-height:100px;
height:auto !important;/*ie6不支持的,提高优先级的属性*/
height:200px;
}
17.最大高度
解决方法:function setMaxHeight(elementId,height){
var container = document.getElementById(elementId);
container.style.height = container.scrollHeight>(height-1)?height+"px":"auto";
}
setMaxHeight("div1",200);
19.特殊性问题:p的class为intro
.div1 p{balabala}
.intro{balabala}
解决方法:.div1.intro{balabala}
20.外边距叠加(当垂直外边距相遇时,它们将只形成一个外边距,这个外边距的大小是多个外边距中最大的那个)
解决方法: 添加垂直边框或内边距 .
22。100%高度
解决方法:给元素设置100%高度,需要给她的父级设置明确高度
例如:给元素设置满屏高度,需要将body和html设置为100%;
23.严实包裹:用一个div(或其他容器)包裹一个浮动元素,这个浮动元素会跑出div的框
解决方法:加不必要的清除元素,例如<br class = "clear"/>
或将父元素也设置为float的
或设置overflow
24.浮动层错位:当内容超出外包容器时,在ie6中会忽视定义的with的值,宽度会随内容的增加而增加
解决方法:overflow:hidden
或overflow:scroll
或设计时使用固定宽度
25.躲猫猫bug:一个撑破了容器的浮动元素,如果在他之后有不浮动的内容,并且有一些定义了hover的链接,当鼠标移到那些链接上时,非浮动内容消失了
解决方法:在非浮动元素后加<span style = "clear:both"></span>
或给容器加height:1%;
另一种躲猫猫(来自精通css):在一个设置了background但未设置宽度或高度的容器(假设class = "layout")中,一个浮动元素后面跟着非浮动元素,在跟了清理元素,非浮动内容消失了
解决方法:layout避免使用background属性
或给layout和浮动元素使用positionrelative
或对layout使用line-height属性
或给layout使用固定宽度和高度
27.绝对定位的1像素间距bug:当绝对定位元素的父元素高或宽为奇数时,bottom和height会产生错误
解决办法:给父元素定义明确高、宽值
28.3像素间距,ie6中当文本(或非浮动元素)跟在一个浮动元素之后,文本和这个浮动元素之间会多出3像素的间隙
解决方法:给非浮动元素添加float
或给浮动元素添加fdisplay:inline和_margin-right:-3px;
29.相对定位中的绝对定位元素会发生偏移(本应该相对父元素,却相对于外围元素)
解决方法:给父元素加height:1%;或width:1%;
30.IE下的z-index的bug,因为在IE中定位元素的z-index是相对于父元素的,出现的错误表现
解决方法:给父元素定义z-index,有时候需要定义position:relative
31.如果用float:left把<li>排列,<li>中的<a>会有错误表现
解决方法:给<a>加上float
32.文本重复bug:在ie6中,一些隐藏元素(如“注释”、“display:none”元素)被包含在浮动元素中,可能引发文本重复bug
解决方法:给浮动元素加display:inline
33.列表阶梯bug:<li><a></a></li>在IE中呈现阶梯状
解决方法:给<li>加上float:left或者display:inline
34.zoom:1能触发IE的haslayout,解决IE下的外边距叠加问题和浮动bug
35.垂直列表间隙:<li>中有子元素时会产生间隙
解决方法:给<a>加上float:left并且清除,或触发<a>的haslayout
给<li>定义display:inline
给包含文本末尾加空格
36.IE6中的hover:ie6中只有a标签能使用:hover
解决方法:onmouseover
37.IE6中调整窗口大小的bug
当把body居中,任何body中的相对定位元素都会固定不动
解决方法:给body定义position:relative
38:overflow:auto可以清除浮动,但IE6不支持:使用_display:inline-block