瀏覽器兼容、圖片格式

html裏的hack：

<!--[if lte IE 9]>;小於等於 IE9版本

　　這是代碼

<![endif]-->;結束

lte :less than(小於) or equal（等於）;

css的hack：值的 hack，選擇器的hack

　　IE6及如下的hack符號：_下劃線和 - 減號，加在屬性前面

　　IE六、7的hack符號：！歎號，加在屬性前面

　　IE8的hack符號：\0/  加在屬性值後面

　　IE六、七、八、九、10hack符號：\9  加在屬性值後面

選擇器的hack：

　　IE6 及如下版本的hack符號：* html   加在選擇器前面   (* html  .box)

　　IE7及如下版本的hack符號：,  加在選擇器後面（.box,）

　　除了IE6的hack符號：html>body   加在選擇器前面，（html>body  .box）

IE6 盒模型：

　　字號的像素不能大於 盒子的高度　　解決方法：字號的像素變小

浮動的瀏覽器兼容：

　　高級瀏覽器：不浮動的元素會到浮動元素下面

　　IE6：在浮動元素後面的不會出現壓蓋效果　　　　解決方法：不要用浮動製做壓蓋，同級元素，一個浮動另外一個也要浮動

　　IE6 像素 bug：

　　　　若是元素一個浮動，一個不浮動，IE 6 裏會並排排列，同時兩個元素之間多了 3 像素間距 　　

　　　　解決方法：1.同級元素全都浮動

　　　　　　　　　2.給浮動的元素添加一個  margin-right   值爲負數

　　IE6 圖片邊框問題：

　　　　圖片外包裹了一個 a 標籤，在 IE6 裏會比正常狀況給圖片多加了一個藍三色的邊框

　　　　解決方法：給 img  都清除邊框 （border：none）

 　　雙倍 margin 問題

　　　　若是浮動的方向和 margin 邊距的方向相同，那麼首個浮動的元素，距離父盒子的邊距

　　　　是 margin 值的兩倍。

　　　　　解決方法：1.浮動的方向與 margin 的方向相反，父盒子和第一個元素的間距用父盒子的 padding擠出來

　　圖片格式：

　　　　JPG圖片點：能夠壓縮，品質能夠調整，缺點：不能保存圖層、背景透明、圖片半透明的效果

　　　　　　用途：有實際意義的結構，用做插入圖，背景不是透明的背景圖，圖片比較小

　　　　PNG圖片：特色：能夠保存圖層，缺點：文件太大

　　　　　　若是保存的圖片背景透明，文件色彩，形狀都比較簡單，png圖片處處成沒有圖層的時候，文件反而比JPG要小

　　　　　　用途：背景透明和半透明的圖片，精靈圖，圖片比較小，色彩不是很複雜

　　　　GIF：特色：色彩單一，品質不能調，文件比較小，能保存圖層，支持透明，不支持半透明，能作動圖

　　　　　　用途：動圖，，解決IE6 圖片透明