IE의 숨겨진 배경 이미지

Question

사용자가 편집 권한이있을 때 페이지에 나타나는 수정 버튼이 있습니다.

.editlink{ 
background-image: url(../img/pencil.png); 
background-repeat:no-repeat; 
padding: 2px 8px; 
} 

이 파이어 폭스에서 잘 작동하지만 IE에서 전혀 나타나지 않습니다

<a class='editlink' href='edit.html'></a> 

내 해당 CSS는 연필 아이콘으로 EDITLINK 클래스를 렌더링 : 나는 링크로 구현했습니다 . 내가 & nbsp; <a> 태그 안에는 연필이 표시되어 있지만 태그를 비워두기를 바랬습니다. 이 문제를 해결하기 위해 CSS를 수정할 수 있습니까?

Answer 1

이것은 IE의 hasLayout 속성과 관련된 버그입니다.

에 한번 당신의 스타일에

zoom:1; 

를 추가하고 그것을 잘 작동합니다.

Answer 2

IE에서 실제로 상당히 일반적인 문제입니다. 내용이없는 표 셀도 실제로 렌더링되거나 문서에 나타나지 않습니다. 그것은 매우 정상입니다. 내 조언은 거기에 공간을 유지하거나 "display : block;"링크를 만드는 것입니다. 너비와 높이를 사용하여 크거나 작게 만듭니다. 이것은 더 이상 인라인 요소가 아니므로 위치 지정과 관련된 자체 문제가 있습니다.

한 고체 대안은 여기에 다음과 같은 링크를 가지고 할 것 :

<a class='editlink' href='edit.html'><img src="img/pencil.png"></a> 

이것은 모든 브라우저에서 제대로 앵커을 뻗어 보장한다.

Answer 3

스타일 시트에서 링크의 너비와 높이를 설정할 수 있습니다. FF, IE 및 Chrome에서 올바르게 렌더링됩니다.

.editlink{ 
background-image: url(../img/pencil.png); 
background-repeat:no-repeat; 
padding: 2px 8px; 
width: 10px; height: 20px; 
}