<input type = "submit"> Ошибка заполнения на Safari для мобильных устройств? - PullRequest
Новая
       83

<input type = "submit"> Ошибка заполнения на Safari для мобильных устройств?

12 голосов
/ 19 августа 2010

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

Вкл.Кнопки, браузер iPhone / Mobile Safari добавляет отступ слева и справа.Этого не происходит ни в настольной версии, ни в любых других мобильных / настольных браузерах Webkit, которые я пробовал.По-видимому, к каждой стороне добавляется размер шрифта в пикселях (т. Е. Шрифт 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: нет ... это не имеет значения.Также не удаляет закругленные углы.Я сделал демонстрационную страницу о том, как настольная версия отображает различные объекты -webkit-Appearance;у всех есть -webkit-border-radius: 0 и приведенный выше код.

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

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

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

Ответы [ 5 ]

4 голосов
/ 27 августа 2010

У вас есть контроль над формой? 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 голосов
/ 19 ноября 2013

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

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

#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;
}
2 голосов
/ 21 февраля 2011

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

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

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

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

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

2 голосов
/ 24 августа 2010

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

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

1 голос
/ 23 августа 2010

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

<input type="submit" />

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

<button type="submit" />

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

...