CSS отступ и радиус границы не применяются на мобильном телефоне - PullRequest
Новая
       11

CSS отступ и радиус границы не применяются на мобильном телефоне

0 голосов
/ 26 января 2020

У меня есть контактная форма электронной почты, кнопка отправки и несколько основных c стилей на кнопке. Все стили работают на рабочем столе, и большинство стилей применяются для мобильных устройств, но не для отступа или границы радиуса. Я уже пробовал переключаться на ЕМ-блоки вместо пикселей. URL-адрес http://sharperprogrammer.com/contact (не саморекламы, просто думал, что это поможет увидеть все)

HTML: 

<input type="submit">

CSS: 

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    /* padding: 12px 20px; */
    padding: 1.2em 2em;
    border: none;
    border-radius: 0.4em;
    cursor: pointer;
    margin: 10px;
}

Я даже подключил iPhone к моей Ma c и открыл Safari Developer Tools, и я могу установить или снять флажок, чтобы переключать различные стили на кнопке, но заполнение кажется не делать ничего. Это странно для меня, потому что другие стили, такие как цвет фона, работают нормально, так что я знаю, что все связано по крайней мере. Спасибо, что заглянули!

Редактировать : Стиль отлично подходит для браузера Android на телефоне Chrome, но стилизация не применяется правильно на моем iPhone ' s Chrome или браузер Safari. И я очистил кеш браузера на всякий случай.

Вот скриншот:

button_padding_not_applied

Ответы [ 2 ]

1 голос
/ 27 января 2020

Мне кажется, что Safari / Chrome Mobile имеет несколько стилей кнопок по умолчанию, которые более конкретны c, чем input [type=submit]. Возможно, более специфичные c стили не определяют цвет фона, поэтому ваш работает.

Я нашел два решения, которые я опишу ниже, и оба ручаются за добавление -webkit-appearance: none; в качестве решения.

CSS странный рендеринг кнопки на iPad / iPhone

Почему мой стиль кнопок меняется на ноутбуке и мобильном телефоне

Надеюсь, это будет работать для вас:)

1 голос
/ 26 января 2020

Попробуйте добавить это:

  • в файле navbar.css внутри медиа-запроса: 
@media only screen and (max-width: 600px) {
.navbar{
    flex-direction: column;
    align-items: center;
}

}
...