兼容與圖片整合
1讳嘱、瀏覽器內(nèi)核：
歐朋瀏覽器是公認(rèn)的渲染靜態(tài)頁面最快的瀏覽器
谷歌瀏覽器：Google?Chrome，之前一直使用蘋果的webkit內(nèi)核酿愧，但是現(xiàn)在它與蘋果內(nèi)核分道揚鑣沥潭，自己開創(chuàng)了新的blink內(nèi)核，這個內(nèi)核也在被歐鵬（opera瀏覽器）共同采用和開發(fā)嬉挡；
火狐瀏覽器：Mozilla?Firefox钝鸽，內(nèi)核是Gecko
opera瀏覽器：內(nèi)核是blink；Presto???(前內(nèi)核?已經(jīng)廢棄?)
Safari瀏覽器：使用的是蘋果公司自己的內(nèi)核:webkit庞钢。
IE瀏覽器是微軟出品的瀏覽器拔恰，IE4以上版本都是Trident內(nèi)核。
2基括、常見bug：
1)圖片有邊框BUG
當(dāng)圖片加在IE上會出現(xiàn)邊框
Hack:給圖片加border:0;或者border:0????none;
2)圖片間隙
div中的圖片間隙BUG
描述：在div中插入圖片時颜懊，圖片會將div下方撐大大約三像素。
3)雙倍浮向（雙倍邊距）（只有IE6出現(xiàn)）
描述：當(dāng)Ie6及更低版本瀏覽器在解析浮動元素時风皿，會錯誤地把浮向邊邊界（margin）加倍顯示河爹。
hack:給浮動元素添加聲明：display:inline;
4)默認(rèn)高度（IE6、IE7）
描述：在IE6及以下版本中揪阶，部分塊元素?fù)碛心J(rèn)高度（在16px左右昌抠；）
hack1:給元素添加聲明：font-size:0;
hack2：給元素添加聲明：overflow:hidden;
5)表單元素對齊不一致
描述：表單元素行高對齊方式不一致
hack:給表單元素添加聲明：float:left;
6)按鈕元素默認(rèn)大小不一
描述：各瀏覽器中按鈕元素大小不一致
hack1：?統(tǒng)一大小/（用a標(biāo)記模擬）
hack2:input外邊套一個標(biāo)簽，在這個標(biāo)簽里寫按鈕的樣式鲁僚，把input的邊框去掉。
hack3:如果這個按鈕是一個圖片裁厅，直接把圖片作為按鈕的背景圖即可冰沙。
8)鼠標(biāo)指針bug
描述：cursor屬性的hand屬性值只有IE9以下瀏覽器識別，其它瀏覽器不識別該聲明执虹，cursor屬性的pointer屬性值IE6.0以上版本及其它內(nèi)核瀏覽器都識別該聲明拓挥。
hack:如統(tǒng)一某元素鼠標(biāo)指針形狀為手型，
應(yīng)添加聲明：cursor:pointer（手型）?wait等待?move移動
9)透明屬性
兼容其他瀏覽器寫法：opacity:value;(value的取值范圍0-1;
例：opacity:0.5;)
IE瀏覽器寫法：filter:alpha(opacity=value);取值范圍?1-100(整數(shù))
3袋励、圖片整合：
優(yōu)點:
（1）CSS?Sprites能很好地減少網(wǎng)頁的http請求侥啤，從而大大的提高頁面的性能，這是CSS?Sprites最大的優(yōu)點茬故，也是其被廣泛傳播和應(yīng)用的主要原因盖灸；
（2）CSS?Sprites能減少圖片的字節(jié)；
（3）CSS?Sprites解決了網(wǎng)頁設(shè)計師在圖片命名上的困擾磺芭，只需對一張集合的圖片命名赁炎，不需要對每一個小圖片進(jìn)行命名，從而提高了網(wǎng)頁制作效率钾腺。
（4）CSS?Sprites只需要修改一張或少張圖片的顏色或樣式來改變整個網(wǎng)頁的風(fēng)格徙垫。
缺點:
（1）圖片合并麻煩：圖片合并時讥裤，需要把多張圖片有序的合理的合并成一張圖片，并留好足夠的空間防止版塊出現(xiàn)不必要的背景姻报。
（2）圖片適應(yīng)性差：在高分辨的屏幕下自適應(yīng)頁面己英，若圖片不夠?qū)挄霈F(xiàn)背景斷裂。
（3）圖片定位繁瑣：開發(fā)時需要通過工具測量計算每個背景單元的精確位置吴旋。
（4）可維護(hù)性差：頁面背景需要少許改動剧辐，可能要修改部分或整張已合并的圖片，進(jìn)而要改動css邮府。在避免改動圖片的前提下荧关，又只能（最好）往下追加圖片，但這樣增加了圖片字節(jié)褂傀。
