CSS-свойство text-align переопределяется iOS Webkit для кнопки отправки

Question

Ниже приведен мой код CSS для кнопки отправки формы:

.submit {
    -webkit-appearance: none !important;
    text-align: center !important;
    border-radius: 0rem;  
    color: rgb(63, 42, 86);
    display: inline-block;
    float: right;
    border: none;
    font-size: 14px;
    border-left: 0.05rem solid rgb(63, 42, 86);
    width: 3.6rem;
    height: 2.2rem;
    line-height: 1.75rem;
    transition: background-color 0.2s;
    background-color: transparent;
}

После некоторых начальных проблем форматирования на iOS, я реализовал -webkit-appearance: none который исправил большинство проблем. Но текст "Отправить" для кнопки "Отправить" теперь выровнен по правому краю, а не по центру на iOS, как показано на следующем рисунке: http://ben-werner.com/screenshot/01.png

Однако в настольной версии с использованием Chrome и Safari текст отображается по центру, как и должно быть: http://ben-werner.com/screenshot/02.png

Я не думаю, что это проблема специфичности, так как !important декларация о text-align: center должно предотвратить что-либо еще в моем CSS, переопределяя это.

Кто-нибудь имеет представление о том, что происходит на устройстве iOS, что заставляет текст Отправить работать по-другому? Любая помощь высоко ценится, спасибо!

Ссылка CodePen: https://codepen.io/benwerner01/pen/BqErOE (Примечание: HTML-формат корректно форматируется на сайте CodePen, но тот же код, работающий в Safari или Chrome на iOS, ломает кнопку. Я разместил код из CodePen на https://ben-werner.com/, чтобы продемонстрировать, что на мобильном телефоне он отображается неправильно)

Answer 1

Хорошо, я знаю, что сейчас происходит. Вы даете своей кнопке отправки определенную ширину и высоту, которые влияют на выравнивание текста на устройствах iOS. Убраны значения ширины и высоты, и ваш текст будет выровнен по центру на устройствах iOS. Я бы также использовал отступы, чтобы дать вашей кнопке желаемую ширину и высоту вместо этих свойств.

.submit#mc-embedded-subscribe {
 border-radius: 0 !important;
 -webkit-appearance: none !important;
 color: rgb(63, 42, 86);
 float: right;
 border: none;
 font-size: 14px;
 border-left: 0.05rem solid rgb(63, 42, 86);
 /*     width: 3.6rem;
       height: 2.2rem; */
 text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
 line-height: 1.75rem;
 transition: background-color 0.2s;
 background-color: transparent;
 margin: 0 auto;
 }