<input type="submit"> ошибка заполнения на Safari mobile?

Ответ 1

Если вы попытаетесь установить дополнение на огромное значение, скажем, 100px, вы заметите, что верхнее и нижнее заполнение увеличиваются, а влево и вправо остается неизменным по умолчанию в мобильном Safari. Поэтому я полагаю, что можно с уверенностью предположить, что это довольно просто считается ошибкой в ​​процедурах webkit iOS, и нет прямого решения, если Apple не решит проблему.

Обходным решением будет создание DIV, который будет выглядеть так, как вы хотите, и добавьте обработчик onclick, который отправит вашу форму. Нет необходимости когда-либо использовать настоящую кнопку отправки.

Ответ 2

У вас есть контроль над формой? aka: вы вручную вводили форму?

Если это так, добавьте в него тег id или class

<input type="submit" id="submit" value="submit">

затем настройте css на

form input #submit { /* more specific to override webkit */ 
   -webkit-appearance:none;  
   -webkit-border-radius:0px;
   margin:0;  
   padding:0;  
   border:0;  
   display:block;
}

Ответ 3

У меня была аналогичная проблема, и я заметил, что моя проблема была решена, когда я устанавливал фон в градиент вместо обычного фона.

Это как-то просто игнорировало значения прокладки

#submit{
    background:#a0b9dc;
    padding:9px 35px;
 }

Нижеприведенный код разрешил проблему заполнения для меня на кнопках отправки.

#submit{
    background:#a0b9dc;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A0B9DC));
    background: -o-linear-gradient(bottom, #A0B9DC 0%);
    background: -moz-linear-gradient(bottom, #A0B9DC 0%);
    background: -webkit-linear-gradient(bottom, #A0B9DC 0%);
    background: -ms-linear-gradient(bottom, #A0B9DC 0%);
    background: linear-gradient(to bottom, #A0B9DC 0%);
    padding:9px 35px;
}

Ответ 4

Я столкнулся с этой ошибкой сегодня, когда моя мама сказала мне, что страница, которую я сделал, пропускает текст на ее старом iPhone 3G. Разумеется, я запустил свою жену, старую 3G, где-то лежал в ящике, и текст на одной из моих кнопок отбрасывается в сторону, потому что Safari вставляет гигантский интервал.

Хорошей новостью является то, что в последнем обновлении (не знаю точно, что, но у меня есть обновленный iPhone 4), эта ошибка исправлена.

Плохая новость заключается в том, что если пользователи не обновляют свои браузеры, я не могу найти никакого способа обойти это без использования тега.

Мой совет сейчас - проверить версию Mobile Safari. Если они используют последнюю версию (или какая бы версия не исправляла эту ошибку или выше), они получают страницу с помощью кнопки. Если нет, они могут получить страницу с альтернативными тегами, используемыми для создания кнопок. На моей странице это выглядит не так хорошо, и это немного неудобно, но я уже проверяю браузеры на основе мобильных или настольных версий сайта, поэтому это не слишком важно.

Надеюсь, что это поможет.

Ответ 5

Это может быть глупое предложение, но если проблема связана с

<input type="submit" /> 

Вы могли бы попробовать изменить его для

<button type="submit" />

Что делает то же самое, но может не иметь ошибки?