центрирование содержимого с использованием flex в сафари

Question

У меня есть проблема с использованием flex в сафари. Когда я пытаюсь центрирование содержания входных данных, он имеет какое-то странное действие:

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, это нормально, содержание имеет центральное положение в блоке , Html той части кода

<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> 

С другой браузерами я не имею никакого prombles, мобильных и настольных. Этот код был протестирован на сафари> 7. Есть ли какое-то собственное решение css?

Answer 1

Я искал этот вопрос на сафари 9.1.2 и что помог мне в центре детали был старая 2009 Flexbox спецификации:

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

Попробуйте удалить display: flex; и посмотреть, если он работает для вас.