YUI 자동 완성이 IE7의 다른 페이지 요소 아래에서 렌더링됩니다.

Question

예 : here을 사용하여 섹시한 그림자와 모서리 등으로 스타일이 지정된 상자 열이있는 페이지에서 작업하고 있습니다. CSS가 어떻게 작동하는지 완전히 이해할 수는 없지만 은으로 보입니다.

맨 위 상자 안에는 검색에 사용되는 텍스트 입력이 있습니다. 검색 창은 YUI autocomplete 위젯에 연결됩니다.

모든 것이 Mac에서는 Firefox3, Windows에서는 FF2, Mac에서는 Safari에서 잘 작동합니다. WinXP의 IE7에서 자동 완성 제안은 둥근 모서리 상자 아래에 렌더링되어 첫 번째 항목을 제외한 모든 항목을 읽을 수 없게 만듭니다.하지만 IE7이 실제로 하나 이상의 제안을 얻고있는 상자 사이에서 충분한 엿보기를 볼 수는 있습니다.

어디서 문제를 해결하기 시작할 수 있습니까?

그리고 여기에 오류가 IE7에서의 모습입니다 : 여기

성공이 WINXP에 FF2에 보이는 무엇을 나는 이해 완전히 아니에요

Answer 1

마지막으로 구현 한 작업 솔루션은 this explanation을 반복해서 읽는 것을 기반으로했습니다.

기본 HTML에서 모든 파란색 둥근 모서리 요소는 DIV이며 모든 형제 (동일한 DIV의 모든 자식)입니다.

자동 완성 div 자체의 z- 색인 (둥근 모서리 컨테이너 div의 위대한 증손자)은 임의로 높을 수 있으며 IE가 본질적으로 전체를 렌더링 했으므로이 문제를 해결하지는 못합니다 검색 상자의 내용 아래 "Vital Stats"상자의 전체 내용은 기본 Z- 색인이 있고 중요도가 이고 나중에이 HTML에 있습니다.

트릭은 이러한 형제 DIV (파란색 둥근 모서리 컨테이너)의 각각에 z- 인덱스를 내림차순으로 지정하고 모든 위치를 상대적으로 표시하는 것이 트릭입니다. 따라서 검색 창을 포함하는 파란색 div는 z- 색인 : 60이고, "중요 통계"상자는 z- 색인 : 50, "태그"는 z- 색인 : 40 등입니다.

그래서 더 일반적으로 중첩되는 요소와 중첩되는 요소의 공통 조상을 찾습니다. 공통 조상의 직계 하위 항목에서 콘텐츠를 표시 할 순서대로 z- 색인을 적용하십시오.

Answer 2

문제를 일으키는 설정이지만 YUI 자동 완성 객체의 useIFrame 속성을 탐색 할 수도 있습니다. iframe obj autocomplete 필드 아래에 필드가 있습니다. 그러면 필드가 IE의 버그가 많은 레이아웃에서 보이지 않는 객체 위에 떠있게됩니다.

http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#property_useIFrame

는하지만 문서는이 5.5 < IE < 7 문제, 그래서 이것은 당신이 겪고있는 문제가되지 않을 수 있음을 말한다. 다시 말하면 작업중인 설정을 완전히 이해하지 않고도 자동 완성 필드 및 주변 블록 레벨 요소에 대해 다양한 z-index 값을 실험 해 볼 수 있습니다.

Answer 3

자동 완성 div의 Z- 색인이 둥근 모서리 상자를 구성하는 div보다 큰 숫자 여야합니다. Microsoft는 최상위 요소의 Z- 인덱스를 20000 또는 100000으로 설정합니다. 똑같은 일을하는 것이 현명 할 수도 있습니다.

Answer 4

제레미이 너무 늦게, 그러나 희망 대답은 미래의 프로젝트에 당신에게 유용 할 것이다에 대한

죄송합니다.

여기서 문제는 position : relative를 가진 요소가있을 때마다 IE가 새로운 스태킹 순서를 생성한다는 것입니다. 즉, Z- 인덱스 자체가 유일한 제어 요소가 아닙니다. 당신은 여기에 대한 자세한 내용을보실 수 있습니다 : 전체 자동 완성 구현 (다음 위치를 래핑 컨테이너에 상대 : 내가 제대로 문제를 이해하고있어 경우

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

이 문제를 해결하려면, 위치를 적용 절대 결과 컨테이너로). IE에서 다른 위치 위에 떠있는 요소에 대해 독립적 인 스택 순서를 만들어야합니다. 상대적 스택은 페이지의 뒷부분에 나타납니다.

감사합니다, 에릭

Answer 5

나는 기본적으로 내가 그냥 다른 div에 대한 Z- 인덱스를 변경하여 고정이 비슷한 문제가 있었다. 표시 할 순서대로 각 div의 숫자를 높게 설정하면됩니다.