2016-09-22 4 views
3

同じページの2つのバージョン以下。オレンジ色のスタイルを持ち、デスクトップに正しく表示される送信ボタンがあります。 2番目の画面のボタンには、グラデーションと完全に異なるスタイルがあります。この魔法は携帯端末にのみ表示されます。私は全体のCSSを見て、スタイルを見つけることはありませんでした。 Chromeモバイルエミュレータで正しく表示されます。だから私の質問:このスタイルをデバッグして修正する方法は? 一部thech詳細:BenMさんのコメントで固定CSS。モバイルデバイスのボタンのゴーストスタイル

.form .btn, .beeline-custom .form input.btn { 
    padding: 0; 
    border: none; 
    background: none; 
    display: block; 
    width: 100%; 
    max-width: 239px; 
    margin: 0 auto; 
    padding: 16.5px 10px; 
    text-align: center; 
    background: #fec81e !important; 
    -webkit-border-radius: 40px; 
    border-radius: 40px; 
    -webkit-transition: 0.3s ease; 
    transition: 0.3s ease; 
    color: #000000; 
    text-transform: uppercase; 
    font-weight: 700; 
    font: 17px/1.2 'Roboto-Regular',sans-serif; 
} 

enter image description here

enter image description here

UPD問題:-webkit-外観:ボタンになしモーダル、ボタンのスタイルのためのmagnificポップアップplugi CSS

+0

一部のブラウザでは、 – DestinatioN

+0

は '-webkit-外観を使用してみてください異なるタグを持っているので、私は、ブラウザの互換性のために、あなたのスタイルをチェックするためにあなたをお勧めします:ボタンのNONE'を(必要に応じて他のブラウザの接頭辞とともに)。 – BenM

+0

@BenMありがとう、おじさん! –

答えて

2

ブラウザのデフォルトを上書きするには、appearance CSSプロパティを使用します。 noneにそれを設定し、あなたが行くように良いことがあります:

-webkit-appearance: none; 
    -moz-appearance: none; 
     appearance: none; 
関連する問題