형태 내가 제출 버튼이 버튼 이동 이미지

Question

절단 제출하고 다음 CSS를 사용하여 스타일링 오전 : 놀라운

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

아무것도 : 여기

.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입니다. 그러나, 저를 귀찮게하는 것은 IE에서 제출 버튼을 클릭 할 때 이미지를 두 픽셀 위로 이동시켜 보이지 않게 보이게하는 것입니다. 어떻게 보상하거나 중단 할 수 있습니까?

나는 이미지를 확장하고 상단에 몇 개의 빈 픽셀을 남겨 뒀지 만 여전히 똑같은 작업을 수행합니다!

감사합니다. R.

Answer 1

입력을 버튼 태그로 바꾸어보십시오.

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

그리고 이것이 성취되지 않는지 확인하십시오. 호버 효과를 조정해야하지만 버튼 안에 텍스트를 넣고 음수 텍스트 들여 쓰기 또는 자바 스크립트 호버 이벤트를 사용하여 참조 된 이미지를 변경해야합니다.

또 다른 옵션은 일반적으로 버튼에 클릭 애니메이션이 있으므로 javascript를 사용하여 정상 링크에서 submit 양식을 호출하는 것입니다. ,

---

그냥 메모

, 당신은 아마 배경 위치를 추가하여보다 일관된 결과를 얻을 수 있으며,이 모든 것이 당신은뿐만 아니라

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

---

또 다른, 어쩌면 더 이상 옵션을 나타내는 표현이 있습니다 제출 대신 입력 유형 이미지를 사용하십시오.

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

Answer 2

나는이 버그에 대해 설명하고 몇 가지 해결책을 가지고 확신 :

Fixing the IE8 Form Button with Background Image On Click CSS Bug

Answer 3

나는 내가 그들을 스타일 후 그들은 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> 

제 특별한 경우에는 ID로 버튼을 스타일링하고 클래스를 적용하지 않으므로 .subm 클래스를 사용하는 여러 버튼에 문제가있을 수 있습니다. IE를 통해 저를 위해 일해 왔습니다.