兼容性处理、布局错误解决方法总结

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