CSS学习进阶：关于浏览器兼容设计的几点基础知识

!important的技巧：
提升优先级，IE6不识别，于是可以用此设计解决IE6的一些讨厌的bug。

IE6中float浮动元素导致margin双倍边距的BUG:（浮动元素设置属性display:inline;）
先看css代码:
#1 div{
float:left;
margin-left:10px;
width:420px;
height:150px;
border:1px solid red
}
这样设置左边距设置为10px，但IE6.0解释为20px，解决办法就是是加上 display:inline
代码
#2 div{
float:left;
margin-left:10px;
display:inline;
width:420px;
height:150px;
border:1px solid red
}

firefox中浮动元素父元素高度丢失为零问题解决方法:
方法一:就是在外面再加一层div，在外面的div中设置宽度、居中，在里面的div中设置边框，同时也设置浮动

方法二:在最后一个子元素后增加一个div，用来清理浮动float

方法三:使用after伪类，作用等同于方法二
#father:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}

总结：在标准浏览器中，浮动元素脱离了文档流，即当一个元素设置了浮动属性float之后，它就不再按照文档的元素顺序进行布局了，这时候可以考虑再增加一层，或者用clear清理浮动

UL标签的padding与margin默认值
ul标签在FF中默认只有padding值(即：padding-left:40px),而在IE中只默认有margin值（即：margin-left:40px）,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题。
一般都在总样式规定一下：body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img {padding:0;margin:0;}