浮動的元素必須有寬和高
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;
