a 태그의 클릭 영역 버그.. 어떻게 잡아야 할까요? (IE7 이하에서..)
영동교
해결이 안난채 글이 묻혀버려서;;; 앞으로 끄집어 왔습니다.
(언짢으셨다면 죄송합니다 ㅠ 이거만 해결하면 마무리 작업하고 바로 배포 준비 예정이라...)페이지 상단에 아이콘으로 메뉴를 만드는데
HTML Source
CSS Source
이렇게 구현 했는데(IE7애서는 menu ul li:hover 가 안되더라구요 ;;)
굵게 표시한 부분이 안되는 부분입니다.
이걸 IE7 모드로 열어보면..
링크 영역이 정상적이지가 않은데요 ....아래 그림에서 보이는 바와 같이
(탭 바로 아래에 5개의 음영부분 (높이가 짧은) 이 메뉴 아이콘에서 클릭이 되는 영역입니다.
CTRL + A 해 놓은 상태라 저리 보여요)
a의 클릭 영역이 51px * 50px 이 되지를 않네요..
CSS에
이렇게도 넣어봤는데 소용없고..
혹시 이 현상과 해결방법에 대해 아시는 분 계신가요....?저번에 어찌 어찌 해결 했는데 빌어먹을 호스팅 업체가 지들 오류는 생각도 안하고 트래픽 안나온다고 강제 차단/삭제 시키고선 지들 호스팅 서비스 접는다고 배째라 나오는 바람에 돌아가던 소스 죄 잃어버려서 방법을 못찾고 있네요 ... ;;
해당 현상 확인은http://mulder21c.woobi.co.kr/snigration에서 가능합니다.
이거 뭐... 방문자한테 아이콘 윗부분에 마우스 잘 갖다 대보면 손모양 떠요~ 라고 할수도 없고 ㅋㅋㅋ 아놔 ㅋㅋ
이 죽일놈의 IE 참 여러모로 괴롭히네요 ㅠ
--------------------------------------------------------------------------------------------이것저것 테스트하다보니 웃긴게...
저걸 block으로 처리시키면 세로로 나오기는 해도 정상적으로 클릭 영역이 잡히는데
이걸 다시 float 시키면 클릭 영역이 또 사라지네요 ㅋㅋㅋ 아놔 이게 뭐야 ...
---------------------------------------------------------------------------------------------우헤헤... 자체 해결했습니다...
외국 포럼들 뒤져가면서 찾아보니..
IE7 이하에서는 DIV 에 height 속성 버그가 있네요 ... -ㅅ- ;;;
position:relative 을 추가해 주니 정상적으로 영역이 잡혔습니다 !!! +ㅁ+
하아... 이놈 때문에 개고생 했다니....
-
푸른나래
헛.. 같은 상황으로 고생하다가 수다님 글 보고 해결했어요!! 감사합니다~!!^^
-
도담
소스 해석을 잘못하셨네요 ;;
IE7에서 발생하는 문제이니 말씀해주신 코드 영역이 아닙니다
소스는 좀 더 문제를 잘 파악할 수 있도록 수정했습니다만..
말씀하신 부분은 IE8 이상에서 잘 돌아가는 부분이구요..
(마우스 hover에 따라 이미지를 변하게 하기 위해서 CSS로 처리한거에요)
IE7 이하에서는 해당 부분을 diplay : none 시키고, 그 아래 div와 aimg/a 로 구성된 부분을 보여주는데, 이게 제대로 안되는 겁니다.... -
구슬
근데 저거를 bg로 처리하신 이유가 있나요? 이미지로 해서 링크 하는게 나을꺼 같은데요
구 브라우저에선 :hover가 a 에만 먹히는걸로 알고있어서요..
그리고 상단 메뉴를 컨테이너 안에 넣어야 가운데 정렬이 잘 될꺼같아요~