HTML <button>содержащий изображение, неправильно рендеринг на iPhone 4, есть идеи? - PullRequest
Новая
       49

HTML <button>содержащий изображение, неправильно рендеринг на iPhone 4, есть идеи?

1 голос
/ 22 ноября 2010

Я надеюсь, что кто-нибудь может помочь мне здесь. У меня есть стандартная форма имени пользователя / пароля, которая отправляется с тегом <button>, который содержит маленькое изображение.

Кнопка имеет фиксированную ширину и высоту, без полей, отступов, текста, выровненного по левому краю и без какой-либо другой строки содержимого с тегом <img>. И он выглядит отлично и работает так, как и ожидалось в любом современном браузере на моем ПК с Win7.

На iPhone 4 Safari (у меня нет iPad, чтобы проверить это) кнопка отображается с правильной шириной и высотой, насколько я могу видеть (используя цвет фона). Слева необъяснимый промежуток, и часть изображения теряется из-за переполнения.

Мне не удалось найти какой-либо CSS, который, кажется, вызывает это или может это исправить - так что это раздражает. Кто-нибудь сталкивался с подобным? Потому что я работаю в ограниченном пространстве (отсюда и фиксированный размер и переполнение), просто оставить его не совсем мой предпочтительный вариант, так как это убивает внешний вид коробки.

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

Итак, подведем итог: КНОПКА, кажется, имеет правильный размер и местоположение, но ее дочерний IMG рендерится не в том месте на iPhone 4.

РЕДАКТИРОВАТЬ: Извините, должен был включить ссылку ... wamdirect.co.uk это сайт, над которым я работаю, проблема в правом верхнем углу окна входа при просмотре на iPhone 4.

1 Ответ

1 голос
/ 22 ноября 2010

не использовать <img>, Применение: 

button
{ 
   background-image: url(...);
   background-repeat:no-repeat;  
}
...