浏览器兼容问题总结

1.不同浏览器的标签默认的margin和padding不同

解决：*{margin：0；padding:0}

2.IE6不支持圆角

解决：用图片代替

3.在IE下img外边加了a链接后产生难看的蓝色边框

解决：img{border:0}

4.IE6下给块属性标签float后，又添加的指定margin-left的时候，IE6出现双倍边距

解决：给浮动元素加display:inline，转为行元素

5.div包含一张图片，底部可能有2px 4px或更多的间隙

原因：因为给div加font-size会影响间隙的大小
解决：
1.将图片对齐方式改为vertical-align，值为top或bottom
2.将图片转为块元素display:block
3.将父元素的字体大小设为0，font-size:0;

6.几个img标签放在一起的时候，有些浏览器会有默认间距

解决:给img加float

7.子元素的margin-top:20px没有加到指定元素上

解决：
1.给父元素加透明边框：border:1px solid transparent;
2.给父元素加padding-top：20px，同时父元素的高度减去20px
3.通过给父元素加overflow:hidden

8.IE6下浮动块元素与未浮动块元素处于同一行，有默认的3px间距。

解决：设置非浮动元素浮动

9.IE6下行元素转为块元素，高度超出

解决：给元素加overflow:hidden

10.子元素里加float,如果父元素没有给定高度，子元素撑不起父元素

解决：
1.父元素结束前加<div style="clear:both"></div>或者
.clearfix:after {
content: ‘.’;
height: 0;
display: block;
clear: both;
}
2.给父元素也加float:left
3.子元素去掉浮动加float:none
4.给父元素加overflow:hidden或overflow:auto;
原理：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
块级格式化上下文

关于BFC
定义：BFC（Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了float:left,overflow值不为 visible 或position:absolute或fixed样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。
作用：独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，所以就不用清除浮动来撑起包含块的高度。

11.IE6不支持透明rgba与opacity

解决:{
opacity:0.6;
filter: alpha(opacity=60); /* for IE5-7 /
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; / for IE 8*/
}

12.IE6不支持min-height,max-height

解决：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{
min-height:200px;
height:auto !ImportAnt; // 使用ie6不支持但其余浏览器支持的属性!important。
height:200px; // IE6下内容高度超过会自动扩展高度
overflow:visible;}

13.IE6中，!important不起作用

解决：单独设置