마우스를 올리면 IE7의 텍스트 영역이 사라집니다.

Question

나는 큰 데이터 입력 종류의 페이지, div를 사용하는 테이블 종류의 레이아웃을 가지고 있습니다.각 행에는 열기/닫기를 전환할 수 있는 하위 행이 있습니다.전환은 CSS 가시성 설정을 사용하여 트리거됩니다.테이블의 각 "셀"에는 모서리에 작은 이미지가 있으며, 이미지를 클릭하면 항목에 메모를 남길 수 있는 팝업 창이 열립니다.

이 팝업 창에는 버튼(입력 유형=제출)과 함께 텍스트 영역과 일련의 확인란이 있습니다.팝업은 숨겨진 div 내에 중첩된 iframe입니다.

IE7에서는 이 Notes iframe을 열고 페이지를 아래로 스크롤한 후 팝업의 텍스트 영역 위에 마우스를 놓으면 팝업이 사라지고 그 아래에 페이지 콘텐츠가 표시됩니다.확인란에 마우스를 올려 놓으면 아래 페이지도 표시됩니다.

그래서 저는 몇 가지 다른 수정 방법을 시도해 보았습니다.Z-index는 이 문제를 해결하는 데 사용될 수 있기를 바랐던 것입니다.그런 행운은 없습니다.텍스트 영역을 일반 입력 유형=텍스트로 바꾸려고 시도할 수도 있지만 확인란에도 이 버그가 표시되므로 한 줄 텍스트 입력도 버그를 일으킬 것으로 의심됩니다.

Answer 1

블록 요소 외에도 z-index는 IE 호출이있는 모든 요소에 대해 작동합니다. 더 읽으십시오

Answer 2

트리거하는 가장 쉬운 방법 hasLayout (다른 게시물에서 언급)는 추가하는 것입니다 zoom: 1.

가장 멍청한 IE 6/7 디스플레이 문제를 디버깅 할 때 때때로 임시를 버릴 수 있습니다.

* {
    zoom: 1;
}

내 CSS에 그리고 무엇이 변경되는지 확인하십시오. 요소, 부모/어린이 등으로 시작하는 요소에 선택적으로 추가하기 시작하면 선택적으로 추가하기 시작합니다.

zoom IE에 의해서만 지원되므로 문서에 보유한 것은 매우 "안전합니다. 또한 절대적으로 포지셔닝 요소 등과 같은 미친 일을하지 않아도됩니다.

Answer 3

Z-Index가 절대 위치에 있는 블록 요소에 대한 유일한 작업을 기억한다면 말이죠.따라서 팝업 상자의 위치를 ​​절대값으로 설정한 다음 Z-색인을 시도해 보세요.팝업이 특정 위치에 있어야 하는 경우 래핑 요소를 상대적인 위치로 설정하세요.저는 이전에 이 문제를 겪은 적이 있으며 제가 설명한 방식으로 문제를 해결했다고 생각합니다.

Answer 4

IE7의 입력 필드와 텍스트 레아 모두에서 똑같은 문제가 있었지만 너비를 주었을 때만 가능했습니다.

어디에서 얻었는지 기억하지 못하지만이 솔루션을 발견했지만 매우 우아하지는 않지만 문제를 해결했습니다. 추가 :

filter:alpha(opacity=100)

귀찮은 필드의 스타일 속성 CS에.