IE6/7 - CSS 팝업창에서

Question

나는 CSS 팝업으로 고심하고 누군가가 도울 수 있기를 바라고있다.

우리는 파이어 폭스, 크롬 등 (정상적으로) 셀 안에이 팝업이있는 다양한 tds 파일을 가지고 있습니다. 그러나 IE8 이하의 구형 브라우저에서는 문제가 있습니다.

커서가 팝업 영역 (셀 바로 아래에 위치) 위로 이동하더라도 마우스가 셀 밖으로 이동할 때 : 호버가 손실 된 것으로 보입니다. 아마도 네가해야 할 일을 말하는 것일 수도 있지만, 파이어 폭스에 맴돌고있는 부모 요소의 자식 요소는 부모 클래스의 : 호버 클래스를 유지합니다.

팝업 div는 절대 위치로 지정되며 margin-left는 -999px입니다.

에 (이 괜찮습니다) : 여백 왼쪽이 -125px로 설정되어 부모 div 요소의 호버 (팝업 DIV의 폭의 절반을, 그래서는 중앙 -도 OK)

는이 모든 괜찮습니다 이전 버전과 마찬가지로 최신 브라우저에서 완벽하게 작동합니다. 나는이 문제를 해결하려고 몇 시간을 잃어버린으로

#page-content .block_calendar_month { overflow: visible; } 

.tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; } 

.tooltip span { margin-left: -999em; position: absolute; } 
td.day:hover { background-color: #fbf16b; } 

.tooltip:hover span { font-size: 12px; position: absolute; left: 0em; z-index: 5000; top: 1em; margin-left: -125px; width: 250px; } 

.tooltip:hover span div { } 
.events {padding: 0.8em 1em; } 

희망 누군가 Thusfar

HTML 코드 조각

<tr> 
    <td> 
     <div class="tooltip"> 
      <span class="events">CONTENT</span> 
     </div> 
    </td> 
    <td> 
     <div class="tooltip"> 
      <span class="events">CONTENT</span> 
     </div> 
    </td> 
    <td> 
     <div class="tooltip"> 
      <span class="events">CONTENT</span> 
     </div> 
    </td> 
    <td> 
     <div class="tooltip"> 
      <span class="events">CONTENT</span> 
     </div> 
    </td> 
    <td> 
     <div class="tooltip"> 
      <span class="events">CONTENT</span> 
     </div> 
    </td> 
</tr> 

CSS는 나에게 몇 가지 조언을 줄 수 있습니다.

Answer 1

나는 IE6을 한동안 사용하지 않았지만 IE7로 작업하면서 테이블과 Z- 인덱스가있는 펑키 한 것들을 수행한다고 말할 수 있습니다. 툴팁으로 작업 할 때 테이블을 사용하지 않는 것이 가장 좋은 해결책이라는 것을 알게되었습니다. 왜 테이블 코드를 제거하고하지 :

<div class="tooltip"> 
    <span class="events">CONTENT</span> 
</div> 

을 또한, 나는 당신이 사용하는 플러그인 무엇인지 확실하지 않다 (사실, 당신이 어떤을 사용하지 않는 모양),하지만 당신은 JQuery와 도구 툴팁을 사용하는 경우 플러그인을 사용하면 팝업의 오프셋 거리를 JSON 매개 변수로 설정할 수 있습니다. 더 읽기 http://jquerytools.org/demos/tooltip/dynamic.html.

현재 구현을 유지하려면 툴팁에 대해 display : block 및 display : none을 토글하는 것이 좋습니다.