從零開始學習前端開發 — 八、常見瀏覽器兼容性問題及圖片整合技術

1、常見瀏覽器兼容性問題

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;

---

 

2、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及以上瀏覽器識別，其餘瀏覽器都不識別

---

 

3、市場主流五大瀏覽器內核

1.IE瀏覽器 內核： Trident(IE內核)

2.Mozilla Fox（火狐） 內核：Gecko

3.Safari(蘋果瀏覽器),Chrome（谷歌瀏覽器） 內核：Webkit

4.Opera（歐朋） 內核：Presto

5.最新版本的chrome瀏覽器 內核：Blink

 

---

 

附錄：

圖片整合技術

1、Css sprites(圖片整合技術)

概念：將多張背景圖片整合到一張背景圖中，經過background-position來實現背景圖定位技術稱爲圖片整合。

咱們也把圖片整合技術叫作精靈圖，雪碧圖，滑動門技術。

2、圖片整合的優點（優勢）

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.避免"大致積"的頁面，代碼結構合理清晰

站外優化：

百度推廣

網站流量分析

網站品牌建設