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

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

0 голосов
/ 28 октября 2018

Ниже приведен мой 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 , чтобы продемонстрировать, что на мобильном телефоне он отображается неправильно)

1 Ответ

0 голосов
/ 29 октября 2018

Хорошо, я знаю, что сейчас происходит.Вы даете своей кнопке отправки определенную ширину и высоту, которые влияют на выравнивание текста на устройствах 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;
 }
...