safari下按鈕樣式失效

這兩天遇到一個問題，頁面在安卓手機裡面正常顯示，但是在IOS裡面按鈕的樣式完全失效了，一番了解之後才知道是appearance屬性 的原因。

在原來的樣式裡面加上一行"-webkit-appearance : none ;"，IOS下的按鈕樣式立馬顯示出來了

<code>#btn{</code><code>width</code><code>:</code><code>80%</code><code>; </code><code>padding</code><code>:</code><code>2%</code> <code>0</code><code>; </code><code>color</code><code>:</code><code>#fff</code><code>; </code><code>font-family</code><code>: </code><code>'kaiti'</code><code>; </code><code>background</code><code>:</code><code>#F3AA3B</code><code>; </code><code>border</code><code>:</code><code>none</code><code>;</code>

<code>    </code><code>-webkit-border-radius: </code><code>5px</code><code>;</code>

<code>    </code><code>-moz-border-radius: </code><code>5px</code><code>;</code>

<code>    </code><code>border-radius: </code><code>5px</code><code>;</code>

<code>    </code><code>-webkit-appearance : </code><code>none</code> <code>;  </code><code>/*解決iphone safari上的圓角問題*/</code>

查了下手冊，CSS對appearance屬性是這麼介紹的：

appearance 屬性允許您使元素看上去像标準的使用者界面元素。

預設值是 normal

文法

appearance: normal|icon|window|button|menu|field;

浏覽器支援

所有主流浏覽器都不支援 appearance 屬性。

Firefox 支援替代的 -moz-appearance 屬性。

Safari 和 Chrome 支援替代的 -webkit-appearance 屬性。

更詳細的介紹，可以檢視手冊  http://www.w3school.com.cn/cssref/pr_appearance.asp

本文轉自   frwupeng517   51CTO部落格，原文連結:http://blog.51cto.com/dapengtalk/1855809