YUI Autocomplete는 IE7의 다른 페이지 요소 아래에 렌더링됩니다.
https://stackoverflow.com/questions/88883
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
저는 지금 섹시한 그림자와 모서리로 스타일이 지정된 상자 열이 있는 페이지에서 작업 중입니다. 여기.나는 CSS가 어떻게 작동하는지 완전히 이해하지 못한다는 것을 인정해야 합니다. 외모 엄청난.
맨 위 상자 안에는 검색에 사용되는 텍스트 유형 입력이 있습니다.해당 검색창은 YUI 자동완성 위젯.
Mac의 Firefox3, Windows의 FF2, Mac의 Safari에서는 모든 것이 잘 작동합니다.WinXP의 IE7에서는 자동 완성 제안이 모서리가 둥근 상자 아래에 렌더링되어 첫 번째 상자를 제외한 모든 항목을 읽을 수 없게 됩니다(비록 IE7이 실제로 두 개 이상의 제안을 받고 있다고 생각하는 상자 사이에 충분히 엿볼 수는 있지만).
문제를 해결하기 위해 어디에서 시작할 수 있습니까?
WinXP에서 FF2의 성공 사례는 다음과 같습니다.
IE7의 실패는 다음과 같습니다.
해결책 2
내가 마침내 구현한 작업 솔루션은 읽기를 기반으로 했습니다. 이 설명 다시 반복하여.
기본 HTML에서 모든 파란색 둥근 모서리 요소는 DIV이며 모두 형제(동일한 DIV의 모든 하위 요소)입니다.
자동 완성 div 자체(둥근 모서리 컨테이너 div의 증손자)의 z-index는 임의로 높을 수 있으며 IE가 본질적으로 검색의 전체 내용을 렌더링했기 때문에 이 문제를 해결하지 못합니다. 상자 아래에 "Vital Stats" 상자의 전체 내용. 둘 다 기본 z-인덱스를 갖고 있고 Vital Stats는 나중에 HTML에서.
비결은 형제 DIV(파란색 둥근 모서리 컨테이너) 각각에 내림차순 z-인덱스를 제공하고 모두 위치:상대적으로 표시하는 것이었습니다.따라서 검색 상자가 포함된 파란색 div는 z-index:60이고, "Vital Stats" 상자는 z-index:50, "Tags"는 z-index:40 등입니다.
따라서 보다 일반적으로 겹쳐지는 요소와 겹치는 요소 모두의 공통 조상을 찾으십시오.공통 조상의 직계 하위 항목에 콘텐츠를 표시하려는 순서대로 Z-색인을 적용합니다.
다른 팁
제레미,
너무 늦어서 죄송합니다. 답변이 향후 프로젝트에서 도움이 되기를 바랍니다.
여기서 문제는 위치:상대적 요소가 있는 요소가 있을 때마다 IE가 새로운 스택 순서를 생성한다는 것입니다. 즉, z-인덱스 자체가 유일한 제어 요소가 아니라는 의미입니다.이에 대한 자세한 내용은 여기에서 확인할 수 있습니다.
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
문제를 해결하려면 문제를 올바르게 이해하고 있다면 전체 자동 완성 구현을 래핑하는 컨테이너에 position:relative를 적용한 다음 결과 컨테이너에 position:absolute를 적용하세요.그러면 해당 요소가 페이지의 뒷부분에 나타나는 다른 위치:상대 스택 위에 떠 있을 수 있도록 IE에서 독립적인 스택 순서가 생성되어야 합니다.
안부, 에릭
난 아니다 완전히 문제를 일으키는 설정을 이해하지만 YUI Autocomplete 개체의 useIFrame 속성을 탐색하고 싶을 수도 있습니다. 자동 완성 필드 아래에 iframe 개체를 계층화하여 해당 필드가 필드를 가리는 개체 위에 떠 있게 할 수 있습니다. IE의 버그 레이아웃.
http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#property_useIFrame
그러나 문서에서는 이것이 5.5 < IE < 7에서 중요하다고 말하므로 이것이 귀하가 겪고 있는 문제가 아닐 수도 있습니다.따라서 다시 말하지만, 작업 중인 설정을 완전히 이해하지 못한 채 다양한 실험을 시도해 볼 수도 있습니다. Z-색인 자동 완성 필드 및 주변 블록 수준 요소의 값입니다.
자동 완성 div의 Z-색인이 둥근 모서리 상자를 구성하는 div보다 큰 숫자인지 확인하세요.Microsoft는 최상위 요소의 z-index를 20000 또는 100000으로 설정합니다.똑같이 하는 것이 현명할 수도 있습니다.
이와 비슷한 문제가 있었는데 기본적으로 다른 div의 z-index를 변경하여 문제를 해결했습니다.표시되어야 하는 순서대로 각 div에 대해 더 높은 숫자를 설정하면 됩니다.
