왜이 요소는 마우스 오버시 부분적으로 강조 표시됩니까?

Question

두 버튼이 포함 된 페이지를 만들고 있습니다.

<td align="right"> 
<a href="#" title="Reset" onclick="resetForm();"> 
     <img src="images/btnBlueL.gif"><span style="background-image:url('images/btnBlueM.gif');color:white;font-weight:bold;height:22px;vertical-align:top;text-align:center;padding-top:5px;text-decoration:none;cursor:pointer;display:inline-block;"> 
     Reset 
     </span><img src="images/btnBlueR.gif"> 
    </a> 

    <a href="#" title="Clear all fields" onclick="clearForm()"> 
     <img src="images/btnBlueL.gif"><span style="background-image:url('images/btnBlueM.gif');color:white;font-weight:bold;height:22px;vertical-align:top;text-align:center;padding-top:5px;text-decoration:none;cursor:pointer;display:inline-block;"> 
      Clear 
     </span><img src="images/btnBlueR.gif"> 
     </a> 

I가 버튼 위에 마우스를 올려, 아주 작은 빨간 선은 오른쪽 아래에 나타납니다 버튼은 두 개의 반원의 이미지에 둘러싸여 버튼 제목 스팬의 조합이다 버튼의 이것은 모든 브라우저에 있습니다. "a"요소를 부분적으로 강조하는 것처럼 보이지만 몇 픽셀에만 해당됩니다. 이걸 본 사람 있어요? 어떻게 그걸 버리셨습니까?

http://jsfiddle.net/jmlane/VHFwB/

Answer 1

하면 링크가 적용된 CSS가 없는지 확인 :

이

a{ 
    text-decoration:none; 
} 
a img{ 
    border:0; 
} 

Answer 2

아마 테두리입니다. 하이퍼 링크에서 테두리를 제거하기 위해 CSS 규칙을보십시오 :

a { 
    border: 0; 
} 

Answer 3

불필요한 테두리 추가 가끔 있습니다를, 그래서 다음 줄을 사용하십시오 내 CSS에 :

a { border: 0; } 
img { border: 0; display: block; } 

기본적으로 이미지는 인라인입니다. 인라인 스타일을 피하십시오! :)