2009-07-02 2 views
12

특정 높이와 너비로 앵커를 갖고 싶습니다.IE : 앵커의 일부만 클릭 가능합니다.

페이지의 특정 영역 앞에 놓이기 때문에 텍스트가 없습니다. 그것은 IE6와 IE7하지만, 모든 일에 잘 작동하고

<a href="/" style="width:370px;height:80px;display:block;position:absolute;"></a> 

: 여기

는 코드입니다. 테두리를 추가하면 앵커의 크기가 정확하다는 것을 알 수 있지만 클릭하려고하면 상단 부분 만 클릭 할 수 있습니다.

이유를 알지 못합니다. 나는 경고와 함께 onclick을 추가하려고 시도했다. 그리고 같은 일은 앵커의 바닥 부분을 클릭하는 것이 불가능하다.

정말 이상합니다. 이전에 누구에게도 일어 났습니까? 아무거나는 도울 것이다.

+0

페이지의 특정 영역 앞에? 페이지의 특정 영역을 클릭 할 수있게하려면 비상식 앵커 태그를 사용하여이 모든 문제를 해결해야합니다. –

+0

이것은 레거시 웹 사이트의 해킹입니다 ... – marcgg

답변

15

이전 버전의 IE에서는 블록 레벨 요소 자체에 onclick 이벤트를 등록 할 수 없습니다. 대신 IE는 블록 내 텍스트 또는 인라인 요소에 onclick을 적용합니다.

전체 앵커와 동일한 크기의 앵커에 transparent image을 넣는 것이 onclick을 등록한다는 것을 발견했습니다.

<a href="/" style="width:370px;height:80px;display:block;position:absolute;"> 
    <img src="Transparent.gif" style="width: 370px; height: 80px"/> 
</a> 
+3

코드를 정확하게 사용하지 않았습니다. marcgg

+0

이 수정 사항은 저의 피부를 회복 시켰습니다 - 감사합니다. IE10은 Z- 색인 기이와 결합 될 때 여전히이 문제를 가지고 있습니다. – Amalgovinus

0

다른 div/span/등의 Z- 인덱스 문제 일 수 있습니다.

+0

방금 ​​Z- 인덱스 9999를 넣으려고했는데 아무 것도 변경하지 않았습니다. 또한 다른 div가 있는지 확인했지만 모양이 다릅니다. – marcgg

2

이 링크는 절대적으로 위치하므로 다른 블록이 부분적으로 겹쳐서 클릭 이벤트의 절반을 숨기는 것처럼 들립니다.

+1

에 동일한 문제가 발생하여 내 요소에 Z- 색인을 추가하고 문제를 해결했습니다. thx – filsterjisah

2

앵커 배경에 놓인 다음 이미지가 보이지 않는 위치에있는 이미지는 IE6 및 IE7의 문제를 해결합니다. 이미지에 앵커 전체 크기를 제안 할 필요는 없습니다.

즉, 페이지에 이미로드 된 스프라이트 나 다른 이미지를 사용하여 다른 호출을 서버에 저장할 수 있습니다.

<a style="position:absolute; z-index:2; background:url(/images/your-sprite.gif) -9999px no-repeat;" href="#">Your anchor</a> 
18

이 문제를 처리하는 또 다른 방법은 블록 요소가 배경 색 모든있어 작은 "해킹/해결 방법은"당신 측면 그것으로 괜찮이다. 다음과 같은 것을 사용하십시오 :

a { 
    .. 
    background-color: white; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    .. 
} 
+1

심지어 IE9도 같은 문제가 있으며'background-color'를 사용하여 수정했습니다 – manikanta

+1

아마 가장 우아한 해결책입니다. – bancer

관련 문제