-1、html 相容性問題

問題：HTML5新的語義標籤在低版本的老IE瀏覽器中存在相容性問題

解決方案：引用第三方解析庫

<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

-2、css相容問題

1、圖片問題

a、圖片下方有間隙

解決方案：

　　（1）img{display：block}

b、圖片的右側有間隙

解決方案：

　　（1）不換行繼續寫

　　（2）設定浮動屬性：float：left；

c、img和input一起使用垂直方向不對齊

解決方案：

　　（1）給img一個{vertial-align：center}

d、圖片新增超連結，帶邊框（僅在IE瀏覽器中存在）

解決方案：

　　（1）img新增{border：none}

2、間距問題（margin和padding）

a、瀏覽器預設的內外邊距不同

*{
       maegin：0；
       padding：0；        
  }

b、兩個塊級元素豎向的margin值不會疊加，其間距取最大值

c、給子元素加margin-top，但是作用在父元素上

解決方案：

　　（1）給父元素新增padding：0.1px；

　　（2）給父元素新增浮動；

3、行高和高度問題

a、浮動的副作用：父元素的高度塌陷

解決方案：

　　（1）給父元素新增高度

　　（2）在浮動的元素後面新增一個空白的div，給div清除浮動

　　（3）給父元素新增overflow：hidden；

4、滑鼠手勢

問題症狀：FireFox的cursor屬性不支援hand，但是支援pointer，IE兩個都支援

解決方案：cursor：pointer

-3、瀏覽器優化方法：

優化原則：

　　DNS是否通過快取減少查詢時間

　　網路請求走最近的網路環境

　　相同的靜態資源快取

　　減少請求的大小

　　伺服器渲染優化

1、減少HTTP請求，合理設定HTTP快取

2、應用瀏覽器快取

　　cookie，loactStorage（一般用於儲存ajax返回的資料）；

3、啟用壓縮

在伺服器端對檔案進行壓縮，在瀏覽器端對檔案進行解壓縮，這樣可以有效的減少通訊傳輸的資料量。

4、CSS Sprites

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。

CSS Sprites為一些大型的網站節約了頻寬， 提高了使用者的載入速度和使用者體驗，不需要載入更多的圖片

對於圖片而言，在頁面剛載入的時候可以只加載第一屏，當用戶繼續往後滾屏的時候才載入後續的圖片。

• jqueryLazyload方式　（依賴Jquery）　
• echo.js方式 （Echo.js 是一個獨立的延遲載入圖片的JavaScript外掛）

6、css放在頁面最上部，javascript放在頁面最下面