近期項目中，白色無下劃線的鏈接在iphone中變成了藍色有下劃線，明顯iphone不支持該鏈接的css，趕緊google、百度一下，發現了不少css樣式iphone居然不支持。

解決方法：多加一個<div>標籤，對a標籤定義顏色和下劃線，注意a標籤不能有背景圖片

<li>
　　<div style="background: url(/resources/main/images/button111.png) no-repeat;width:100%;min-width:130px;">
　　　　<a style="display:block;color:white;font-weight:bold;text-align:center;text-decoration: none;" href="tel:135727322177">135727322177</a>
　　</div>
</li>

注意加上a標籤後並且設置href內容的好處：可以保證兼容各個手機直接點擊手機號碼直接撥號

摘錄：

  1. UC會判斷打開的網站是不是WAP站，從而造成它（UCWEB）認為是WAP站和不是WAP站的解析不同。例如：www.a.com和Wap.a.com兩者指向的為同一個服務器的同一個目錄，結果會發現兩者解析出來的樣式不同。主要體現在margin,padding,background-image的支持不一樣。
  2. UC的WinPhone版對白顏色的字體的支持不好，會解析成黑色
  3. UC的Iphone版如果是白顏色字，背景又為圖片時，會白顏色的字顯示不出來，但如果你點擊的話發現確實又存在該鏈接
  4. UC的預加載，UC會預加載一些鏈接（預加載後訪問速度會特別快，因為已經加載好了），預加載的鏈接會顯示綠色，這就要求我們設計效果圖的話得考慮到這個問題
  5. UC對Response.Redirect的支持不是很好，有時候甚至地址欄的鏈接根本就不跳轉（還是現在的鏈接）。例如這個問題：www.a.com和Wap.a.com兩者指向的為同一個服務器的同一個目錄，結果會發現兩者解析出來的樣式不同。我本來想用跳轉方式來實現（不管是Response.Redirect又或是改變http-equiv='refresh' content=""），但是結果發現並不行。個人認為是因為UC只認來源頁，不認跳轉後的頁面。因為我刷新後樣式就變好了，同樣的問題不止出現在我的頁面，UC首頁導航裏有的也存在這個問題的。

不支持的CSS-（比較懷疑其中的一些結論，因為我的項目中一些css屬性在實際手機測試中是支持的，姑且先摘錄下來吧）

  1. 不支持font-family屬性，也就是説，在UC瀏覽器你只能看到一種字體；
  2. 不支持font-szie屬性，也就是説，在UC瀏覽器你只能看到一樣大小的字體；
  3. 不支持width、height、padding、margin、line-height屬性，也就是説，在UC瀏覽器只能通過p、br等HTML標籤來換行以達到字符上下間隔；
  4. 不支持固定像素的寬度，100%顯示頁面，也就是説，在UC瀏覽器始終將看到的是“滿屏的”；
  5. 不支持浮動、層疊佈局，float和position屬性無效，也就是説，在UC瀏覽器你只能看到“左對齊”。
  6. 支持background-color，但不支持background-image，也就是説不支持CSS背景圖顯示，在UC瀏覽器你只能看到背景色。(表示懷疑，因為有個項目中顯示是支持背景圖像的)
  7. 不支持padding margin
  8. 不"支持"表格嵌套，解決的最好辦法就是一行放一個，顯示的效果肯定是跟自己的想象中是一樣的，否則，會與自己的設想有一定差距。
  9. 不"支持"map
  10. 不支持 line-height
  11. 不支持 strong
  12. 不支持 ul li
  13. 不支持 float
  14. input默認有邊框，記得加上：border:none;

註明：如果遇上不支持的css，可以改動其標籤，如改ul li為table，來解決問題。

鏈接聚焦（hover）

各個瀏覽器均自定義了鏈接的hover樣式，比如有的瀏覽器給鏈接聚焦時加了邊框，有的瀏覽器給鏈接聚焦時加個背景色之類。因此小屏幕移動設備網頁不需要在CSS中編寫hover樣式。

鼠標事件（mouseover）
考慮到觸摸屏操作，用户無法用手指進行over的操作，因此應禁止在應用於移動設備訪問的網頁使用mouseover。

考慮鼠標觸動的效果，比如導航觸動的是整個li，而不是簡單的a

Web標準的支持

確保頁面頂部有： <!DOCTYPE html>

針對iPad與iPhone的樣式區分：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width:480px)" href="iPhone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width:768px) and (max-device-width:1024px)" href="iPad.css" />
<!--<[end IE]>-->