浮动的元素必须有宽和高
1、css hack
1.css条件注释法
<!--[if IE 7]>
<style type="text/css">
h2{color:red;}}
</style>
<![endif]-->
2、表示范围的代码：
gt：大于
gte：大于等于
lt：小于
lte：小于等于
！：不等于
3.css选择符hack
*html .class{样式} ie6选择器
*+html .class{样式} ie7
3.css属性hack
.myh2{_color:red;} ie6
.myh2{*+color:red;} ie7
.myh2{*color:red;} ie6/ie7
.myh2{color:red\0;} ie8/ie9
.myh2{color:red\9;} ie6-ie9
.myh2{color:red\9\0;} ie9/ie10/ie11
4.!important
理论上IE6不认识，火狐认识
比行内样式表优先级高
5.css3新增的属性
—moz— firefox 火狐
—o— opera 欧鹏
—ms— IE 微软浏览器
—webkit— safari、chrome 苹果 和 谷歌
6、 常见bug及解决方案
1.图片引起的bug
1.图片放在一个父元素中，给父元素加边框，图片下边距父元素会有一个空隙
解决方案：给img加一个属性，或者两种都写
img{display：block；}
img{vertical-align：middle(chorme浏览器边框被覆盖，加图片的高度可以解决)或者top}
2.换行插入img标签，图片之间会产生间隙
解决方案：加浮动或者不换行
3.给图片加超链接之后，会自带2像素边框(IE)
解决方案：img{boder:none;}
4.给图片加超链接之后，鼠标放上去边框变色(IE)
<a href="#"><img src=""></a>
给a标签加边框 ：hover也给a加，并把a标签变成块级元素，加宽和高。
其他浏览器可以直接给img:hover
5.图片与其它标签不对其
解决方案;img{vertical-align：middle}
2.间距问题
1.默认的时候浏览器的间距不一样
解决方案：*{margin:0; padding:0;}
2.块级元素，上下外边距取最大值，左右边距叠加
行内元素，上下外边距不起作用，左右边距叠加
行内块级元素，上下边距叠加
3.给子元素加上边距，会把上边距加给父元素
解决方案：给父元素加padding:0.1px;
4.ie6 块级元素居中对齐的时候margin:0 auto;对ie6不起作用；
解决方案：在body{
text-align:center;
}
5.ie6双边距问题：一个左浮的元素又加了margin-left:10px;会产生20px间距
解决方案：display:inline；
6.ie6经典三像素：一个元素浮动了，另一个元素没浮动，两元素之间会产生3px的距离
解决方案：两个都浮动。
3.其他问题
1.ie6不透明度
opacity:0.5;
filter；alpha(opacity=20);
2.鼠标手：
cursor:pointer;
3.最小高度
ie6文字溢出自动撑开
其他浏览器加
_height:xxpx;
min-height；xxpx；
4.一行文本垂直居中
用line-height:;
7、三角的制作：
width:0px;
height:0px;
border:10px solid red;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
border-right:10px solid transparent;
