кнопка отправки формы перемещает изображение обрезки

Question

У меня есть кнопка отправки, и я оформляю ее, используя следующую CSS:

.subm
{    
background-color:Transparent;
background-image:url(Images/Button_Send.png); 
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;}

   .subm:hover
{
    background-color:Transparent;
    background-image:url(Images/Button_Send_Over.png); 
    background-repeat:no-repeat;
    width:82px;
    height:30px;
    display:block;
  border:none;
    outline:none;
    overflow:visible;
}

Вот HTML:

<input type="submit" class="subm" value="" />

Ничего удивительного. Однако, что меня раздражает, так это то, что при нажатии кнопки «Отправить» в IE он перемещает изображение на пару пикселей вверх, обрезая их, что заставляет его выглядеть, хм, хорошее слово «нафф» Как я могу компенсировать или остановить это?

Я попытался расширить изображение и оставить пару пустых пикселей сверху, но это все равно делает то же самое!

Спасибо, Р.

Answer 1

У меня была проблема с перемещением кнопок, когда они нажимались в IE после того, как я их стилизовал. Решение, которое я нашел, было:

1.) Дайте вашим кнопкам равные поля 2.) Поместите кнопку (кнопки) в обертку, которую вы можете расположить по своему вкусу

.subm {    
   background-color:Transparent;
   background-image:url(Images/Button_Send.png); 
   background-repeat:no-repeat;
   width:82px;
   height:30px;
   display:block;
   border:none;
   outline:none;
   overflow:visible;
   margin:10px; //maybe more maybe less
}

<div style="position:...;float:...;">
  <input type="submit" class="subm" name="myButton" id="myButton" />
</div>

Хотя я должен отметить, что в моем конкретном случае я стилизую свои кнопки по идентификатору, а не применяю класс, поэтому у вас могут возникнуть проблемы с несколькими кнопками с использованием класса .subm. ЭТО РАБОТАЛО ДЛЯ МЕНЯ В IE МЫСЛИ.

Answer 2

Я почти уверен, что это описывает ошибку и предлагает вам несколько решений:

Исправление кнопки формы IE8 с фоновым изображением при клике CSS Ошибка

Answer 3

Попробуйте заменить вход тегом кнопки.

<button type="submit"><img src="..." alt="..." /></button>

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

Другой вариант - использовать javascript для вызова формы, отправляемой по обычной ссылке, поскольку кнопки обычно имеют анимацию щелчка.

---

Просто заметка, вы, вероятно, могли бы получить более последовательные результаты, добавив фоновую позицию, и все это вы также можете записать

   .subm:hover
   {
     background: transparent url("Images/Button_Send_Over.png") top center no-repeat;
   }

---

Еще один, возможно, более идеальный вариант, использовать изображение типа ввода вместо отправки.

<input type="image" src="..." Value="Submit" />