從零開始學習前端開發 — 7、常見瀏覽器兼容性問題及圖片整合技術
一、常見瀏覽器兼容性問題
1.雙倍浮動bug
描述：塊狀元素設置了float後，又設置了橫向的margin，在IE6下顯示的margin值要比設置的值大
解決方案： 給float的元素添加display:inline;將其轉換為行內元素
2.表單元素行高不一致
解決方案：
方案一： 給表單元素添加 vertical-align:middle;
方案二： 給表單元素添加 float:left;
3.IE6不識別高度小於10px的容器
解決方案：
方案一: 給元素設置 overflow:hidden;
方案二: 給元素設置 font-size:0;
4.放在超鏈接中的圖片默認有邊框(在某些瀏覽器中)
解決方案：
給圖片添加border:0;或border:none;
5.IE6不識別min-height屬性
解決方案：
方案一： min-height:100px; _height:100px;
方案二： min-height:100px; height:auto!important; height:100px;
6.圖片默認有空隙
解決方案：
方案一：給img添加float屬性 (適用於有多張圖片在一行顯示的情況)
方案二：給img添加display:block; (適用於只有一張圖片的情況)
7.百分比bug
描述：父元素寬度100%，子元素寬度50%，在IE6下50%+50%大於100%，右側的子元素會掉下來
解決方案：
給右側浮動元素清除右浮動 clear:right;
8.IE瀏覽器不識別opacity屬性
解決方案：針對IE瀏覽器寫透明度設置：
filter:alpha(opacity=數值); （取值範圍1-100）
eg: .box{
opacity:.6;
filter:alpha(opacity=60);
}
9.鼠標指針bug
描述：cursor的hand屬性只有IE瀏覽器識別，其他瀏覽器不識別
解決方案：
使用cursor:pointer;IE6及以上瀏覽器和其他瀏覽器都識別
註： cursor:pointer;是將鼠標指針的形狀設置為手型
10.按鈕默認大小不一
解決方案：
方案一：用a標簽模擬按鈕
方案二：如果按鈕是一張圖片，直接將圖片作為按鈕的背景圖片插入即可
11.上下margin重疊問題
描述：當給上面元素設置margin-bottom,給下面元素設置margin-top，此時只能識別其中較大的那個值
解決方案：
方案一：margin-top和margin-bottom只設置其中的一個值
方案二：給上面的元素外面包一個容器，並設置overflow:hidden;
二、css hack
1.概念
針對不同內核的瀏覽器出現的兼容性問題的處理方法就叫做css hack
2.過濾器
a）下劃線屬性過濾器
語法： 選擇器{_屬性:屬性值;}
eg: .box{height:150px;_height:100px;}
註：下劃線屬性過濾器只有IE6及以下版本識別，其他瀏覽器不識別
b)!important關鍵詞過濾器
語法: 選擇器{屬性:屬性值!important;}
eg: .box{background:red!important;background:blue;}
註：加!important的css屬性優先級最高，但是IE6及以下版本的瀏覽器不識別
c)*屬性過濾器
語法： 選擇器{*屬性:屬性值;}
eg: .box{background:blue;*background:pink;}
註：*屬性過濾器只有IE6，IE7識別，其他瀏覽器都不識別
d) \9
語法: 選擇器{屬性:屬性值\9;}
註： 只有IE6，7，8識別，其他瀏覽器都不識別
e) \0
語法: 選擇器{屬性:屬性值\0;}
註：IE8及以上瀏覽器識別，其他瀏覽器都不識別
三、市場主流五大瀏覽器內核
1.IE瀏覽器 內核： Trident(IE內核)
2.Mozilla Fox（火狐） 內核：Gecko
3.Safari(蘋果瀏覽器),Chrome（谷歌瀏覽器） 內核：Webkit
4.Opera（歐朋） 內核：Presto
5.最新版本的chrome瀏覽器 內核：Blink
附錄：
圖片整合技術
一、Css sprites(圖片整合技術)
概念：將多張背景圖片整合到一張背景圖中，通過background-position來實現背景圖定位技術稱為圖片整合。
我們也把圖片整合技術叫做精靈圖，雪碧圖，滑動門技術。
二、圖片整合的優勢（優點）
1.將多張圖片整合到一張圖中，減少了對服務器的請求次數，減輕了對服務器的壓力，加快了圖片的加載速度。
2.同時也減小了圖片體積，達到了網站性能的優化。
SEO優化
SEO—搜索引擎優化
分為站內優化和站外優化兩個方面
站內優化：
1.頁面標題優化
在head部分添加一個有意義的title標題
2.頁面頭部優化
在head部分添加關鍵詞和描述
<meta name="keywords" content="" /> 關鍵詞
<meta name="description" content=""/> 描述
3.超鏈接優化
a）給a標簽添加title屬性
b) 盡量避免將超鏈接放置在flash中，seo無法識別flash中的文字
c) 盡量避免使用圖片熱點鏈接
4.圖片優化
給img標簽添加alt和title屬性
5.添加網站地圖或網站導航
可以讓用戶以最快的速度找到要瀏覽的內容
6.給網站添加友情鏈接
7.靜態頁面比動態頁面更有利於搜索引擎優化
註：隨著搜索引擎的不斷改進，搜索動態頁面也會變得更加容易
8.避免"大體積"的頁面，代碼結構合理清晰
站外優化：
百度推廣
網站流量分析
網站品牌建設
從零開始學習前端開發 — 7、常見瀏覽器兼容性問題及圖片整合技術