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

(Это похоже на вопрос (без ответа) # 3430506, но применяется к входным тегам вместо элементов HTML5.)

Вкл. < input type="submit" > кнопок, браузер Safari для iPhone/мобильных устройств добавляет отступы влево и вправо. Этого не происходит на настольной версии, а также на любых других браузерах для мобильных и настольных Webkit, которые я пробовал. По-видимому, размер шрифта в px с каждой стороны добавляется (т.е. Шрифт 14px означает, что общая ширина 14px + ширина текста + 14px).

В настоящее время я пытаюсь удалить следующее:

/* webkit user-agent stylesheet uses input[type="submit"] */

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

Я видел много ответов об использовании -webkit-appearance: none... это не имеет никакого значения. Не снимает округлые углы. Я сделал страницу для демонстрации того, как версия рабочего стола предоставляет различные объекты -webkit-appearance; все имеют -webkit-border-radius: 0 и приведенный выше код.

Попробуйте просмотреть их на рабочем столе Safari, затем iPhone:
http://deleri.com/test.html

(Safari Mobile снимок экрана для тех, у кого нет iPhone:)
deleri.com/safari.png

Хотя мне бы хотелось узнать, почему эта ошибка возникает, сейчас я больше беспокоюсь о ее исправлении. Я пробовал каждый тип отображения/переполнения/размер окна /-webkit-anything/width: авто/текст-отступ, который можно вообразить, и не может исправить его, установив вручную ширину (конечная ширина должна быть равна проценту, а странное дополнение применяется). Я начинаю сомневаться, если это какое-то непонятное свойство, или если таблица стилей пользовательского агента не перезаписывается. Любые мысли?

Ответ 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" />

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