IE에서 클릭 할 수없는 절대 위치 앵커 태그 (텍스트 없음)

IE에서 클릭 할 수없는 절대 위치 앵커 태그 (텍스트 없음)

---

이미지 위에 절대 위치에 두 개의 앵커가 있으며 다른 브라우저 (Chrome, FF, Safari)에서는 링크를 클릭 할 수 있지만 IE에서는 클릭 할 수 없습니다 (지금까지 8 및 9에서 테스트).

이상한 점은 링크 background-color에 클릭 할 수있는 링크를 제공 하지만, ( 내가 원하는대로 ) background-color로 설정되어 있으면 더 이상 클릭 할 수 없으며 설정을 시도 했지만 운이 없다는 것입니다. IE 의 비트는 IE 8/9에서 사라 졌으므로 이러한 종류의 문제에 대해서는 추측 이 중요하지 않습니다.transparentzoom:1hasLayoutzoom

이 링크를 투명한 bg로 IE 8/9에 표시하는 아이디어가 있습니까?

다음은 제가 함께 작업해온 바이올린입니다. jsFiddle 예제

다음 HTML 레이아웃이 있습니다.

<div id="content">
    <img src="http://placehold.it/724x300" width="724" height="300" alt="woot" />

    <div id="countdown"></div>

    <a id="link1" href="http://www.stackoverflow.com" title="link1"></a>
    <a id="link2" href="http://www.stackoverflow.com" title="link2"></a>
</div>

및 CSS :

body {text-align:center;}
#content {position:relative; width:724px; height:300px; margin:0 auto;}

#countdown {position:absolute; width:650px; height:110px; top:100px; left:30px; background-color:blue;}

#link1 {position:absolute; width:520px; height:35px; bottom:20px; left:0;}
#link2 {position:absolute; width:200px; height:35px; bottom:20px; right:0;}

---

나는 전에이 정확한 문제가 있었고 항상 나를 짜증나게했습니다. 왜 그런지 모르겠지만 항상 1px x 1px 투명한 PNG (또는 GIF)를 만들고이를 배경 선언에서 다음과 같이 사용합니다.

a { background: url("/path/to/image.png") 0 0 repeat; }

도움이 되었기를 바랍니다.

추신-실제 배경색을 지정하지 마십시오. 위의 예를 사용하면 작동합니다.

이 외에도 앵커 태그를 블록으로 표시하도록 설정하고 그 안에 끊김없는 공백을 삽입 할 수도 있습니다 (현재 비어 있고 IE가 작동하지 않을 수 있기 때문입니다).

a { display: block; background: url("/path/to/image.png") 0 0 repeat; }

<a href="#">&nbsp;</a>

---

언급 된 background-image트릭을 사용하여 할 수 있습니다 . 이를 위해 투명한 이미지를 사용하지 않으려면 알 수없는 스키마 또는 about:blank이미지 URL을 사용하십시오.

a { background-image: url("iehack:///"); }

또는

a { background-image: url("about:blank"); }

이것은 적어도 IE 8 + 9 (내가 테스트 한 유일한 IE)와 현재 버전의 Firefox 및 Chrome에서 작동합니다. 여전히 유효한 CSS이며 추가 트래픽이 발생하지 않습니다. 첫 번째 "해킹"은 jquery를 사용할 때 Chrome (및 기타)에서 JS 오류를 제공 할 수 있습니다. 후자는 about:blank문서 의 잘못된 MIME 유형으로 인해 Chrome에서 MIME 유형 경고 만 표시합니다 (확실히) .

---

얼마 전에 게시 한 댓글에서 이식했습니다.

조금 더 길지만 트래픽이없는 기본 64 인코딩 투명 gif :

background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICR‌​AEAOw==')

여기에는 장단점이 있지만 유용 할 수 있습니다. 또한:

background-color: rgba(0,0,0,0)

나는 최근에 이것을 사용했습니다

---

@ tw16의 댓글 invisible은 나에게 opacity.

IE filter:alpha(opacity=0)를 background-color:#fff(또는 다른 색상) 과 결합 하는 것이 이에 대한 좋은 해결책으로 보입니다. IE 7-9에서 테스트되고 작동합니다 (6은 어떤 이유로 불투명도 필터를 적용하지 않지만 6을 지원할 필요가 없으므로 작동합니다)

1x1 이미지 솔루션은 전체적으로 효과가 있으므로 그에게 확인을하겠습니다.

답변 해 주셔서 감사합니다.

---

나는 같은 문제가 있었다. 내 작업 솔루션은 적절한 앵커에 테두리를 추가하는 것이 었습니다. 다음 예와 같습니다. 한 가지 장점은 추가 이미지가 필요 없다는 것입니다.

a { border-right: 1px solid transparent }

---

IE는 콘텐츠가 없을 때 링크가 예상대로 작동하지 않도록하는 불쾌한 습관을 가지고 있습니다. 이 문제를 해결하려면 각 링크  에 콘텐츠를 제공하세요.

Another thing to try is to set display: block; on the links to make IE flow them as block-level elements rather than as in-line elements. This can also help is you need the links to be empty.

참고URL : https://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie