パスワードの入力フィールドがサファリに間違って表示される9.1

Question

パスワードのタイプの基本入力フィールドがサファリにひどく表示される9.1

問題はサファリの「キー」です。これは私のhtmlです：

<div class="form-group"> 
    <input type="password" class="form-control" placeholder="Wachtwoord *" name="password" required=""> 
</div> 

<div class="form-group"> 
    <input type="password" class="form-control" placeholder="Bevestig wachtwoord *" name="password_confirmation" required=""> 
</div> 

クローム：height:100%';の設定

サファリ

は、問題を解決しますが、これは明らかに高さを変更します私が望むものではないフィールドです。

のCss：

input[type="text"], input[type="email"], input[type="password"] { 
    display: block; 
    width: 100%; 
    vertical-align: middle; 
    border: 1px solid #cbcbcb; 
    outline: 0; 
    box-shadow: none; 
    padding: 12px; 
    -webkit-transition: all .35s; 
    -moz-transition: all .35s; 
    -ms-transition: all .35s; 
    -o-transition: all .35s; 
    transition: all .35s; 
} 
.form-control { 
    border: 1px solid #cbcbcb; 
    border-radius: 0; 
} 
.form-control { 
    display: block; 
    width: 100%; 
    height: 34px; 
    padding: 6px 12px; 
    font-size: 14px; 
    line-height: 1.428571429; 
    color: #555555; 
    background-color: #fff; 
    background-image: none; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 
} 

Answer 1

解決策は、入力オブジェクトからパディングを削除することでした。

input[type="password"] { 
    padding: 12px; 
} 

Answer 2

私は正確に同じ問題を抱えていたし、最終的には同じくらい簡単であることが判明したソリューションのためのハイとローの検索：line-height: normal。

これは私のためにブラウザを越えて動作するようです。同じ結果が得られることを願っています！