ウェブとiOSのCSS3ボタンのレンダリングが異なります

Question

自分のサイトで使用しているCSS3ボタンを生成するコードが見つかりました。ブラウザで見たときにボタンが大きく見えます。しかし、私のサイト（同じスタイルを使用する）のモバイルウェブ版では、ボタンのレンダリング方法が異なります。見知らぬ人でも、私がSafariを使用し、iPhoneのUser Agentで自分のサイトを表示すると、ボタンが見えるように見えます。しかし、iOSシミュレータではそうではありません。なぜ誰かが私の理解を助けることができますか？

ここで私が使用しているコードです：ここで

.button, #button .button, li.button .button { 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
    vertical-align: baseline; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    font: 14px/100% Arial, Helvetica, sans-serif; 
    padding: .5em 1.5em .55em; 
    text-shadow: 0 1px 1px rgba(0,0,0,.3); 
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em; 
    border-radius: .5em; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
} 

.orange, #button .orange { 
    color: #fef4e9; 
    border: solid 1px #da7c0c; 
    background: #f78d1d; 
    background: -webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20)); 
    background: -moz-linear-gradient(top, #faa51a, #f47a20); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
} 

それがブラウザでレンダリングする方法です：

：

そして、ここではそれがiPhone上でレンダリングする方法ですが、

Answer 1

私は間違いを犯しました。 -webkit-gradientの構文が間違っていました。代わりに：

-webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20)); 

それはだ...

-webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); 

は、私はそれがされていない必要があり、左とトップの間にコンマを持っていました。

Answer 2

あなたトンを持っていますあなたの背景イメージ（ジェネレータはhereを見つけることができます）としてSVGを使用してried？

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZBQTUxQSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0Y0N0EyMCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkwNCkiIC8+Cjwvc3ZnPg==); 

これはIE9、クローム、サファリやオペラと互換性があります使用して、これは私が（jsFiddleリンクhere）を転がってきたiPhone 3Gに取り組みました。これはIE7/8では動作しません。私が示唆しているのは、IE固有のスタイルシートを使用するか、IE7またはIE8以下にスタイルを適用するための.orangeクラス命令を追加することです。その詳細についてはhereをご覧ください。

Answer 3

"-webkit-外観：なし;" を適用あなたのCSS特性にと この行を追加し、 "入力[タイプ=提出]、入力{-webkit-外観：なし;} [タイプ=リセットしない]"。

Answer 4

Shaktiによると、ボタンには次のCSSを入れるだけです。

-webkit-appearance: none; 

これは、この質問にさらに説明される：

：

「CSS submit button weird rendering on iPad/iPhone」

をあなただけのシンプルな背景色を供給する場合のiOS上のボタンは、iOSのは、見てデフォルトを四捨五入しているようです

background: orange 

グラデーションを指定すると、カスタムスタイルを使用するために、appearance CSSプロパティを効果的にオーバーライドしています。

しかし、構文が間違っていたため、iOSの外観が得られました。