サファリでフレックスを使用したコンテンツのセンタリング

Question

私はサファリでフレックスを使用する際に問題があります。私は、入力の内容を中心にしようとすると、それはいくつかの奇妙な効果を持っています

CSSが

input[type=submit] { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: center; 
    -webkit-justify-content: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    -webkit-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center; 
    max-width: 386px; 
    height: 47px; 
    margin: auto auto 0; 
    font-size: 1.25em; 
    line-height: 24px; 
    color: #fff; 
    background-color: #d08b4d; 
    border-radius: 24px; 
    -webkit-box-shadow: 3px 5px 10px rgba(0, 0, 0, .1); 
    box-shadow: 3px 5px 10px rgba(0, 0, 0, .1); 
    padding: 0; 
    border: none; 
    outline: 0; 
    cursor: pointer 
} 

私はのdivのに適用されるのと同じコードである、それは大丈夫だ、コンテンツがブロックの中心部に位置しています。コード別のブラウザで

<form> 
<h3 class="form-title">Send a message</h3> 
<input type="text" name="name" title="name" placeholder="Name" required> 
<input type="email" name="email" title="email" placeholder="Email" required> 
<textarea name="message" id="" title="message" placeholder="Message" required></textarea> 

<input type="submit" value="Send"> 
</form> 

のその部分の HTMLは、私は、モバイルとデスクトップの両方を任意のpromblesを持っていけません。このコードはsafari> 7でテストされました。 ネイティブCSSソリューションはありますか？

Answer 1

私はサファリ9.1.2でこの問題を探していると何の項目を中心に私を助けたことは、古い2009フレキシボックス仕様だった。

display: -webkit-box; 
-webkit-box-pack: center; /* justify-content */ 
-webkit-box-align: center; /* align-items */ 

はdisplay: flex;を削除し、それはあなたのために働くかどうかを確認してください。