문제_HTML/Xhtml_웹페이지 제작을 다루는 웹페이지 드롭다운 목록 및 div 레이어 선택

HTML의 선택 요소에 대한 질문은 여러 곳에서 제기되었습니다. 얼마 전 한 프로젝트에서 선택 요소에 대한 두 가지 작은 문제에 직면했습니다. 첫 번째는 더 유명한 문제입니다. 일반 div 플로팅 레이어는 IE6에서 선택 요소를 덮을 수 없습니다. 먼저 다음과 같은 예제가 제공됩니다. 참고: FireFox 및 IE7에서 보면,
HTML의 선택 요소에 대한 문제는 여러 곳에서 제기되었습니다. 얼마 전 한 프로젝트에서 선택 요소에 대한 두 가지 작은 문제에 직면했습니다.
관련 기사: div 레이어가 플래시 레이어로 가려지는 문제에 대한 해결 방법
첫 번째는 더 유명한 것입니다. 일반 div 플로팅 레이어는 IE6에서 선택 요소를 덮을 수 없습니다. 먼저 다음 예제가 제공됩니다.

참고: FireFox 및 IE7에서 보면 결과는 동일합니다. 플로팅 레이어 A, B, C는 모두 정상적으로 구현될 수 있습니다. 즉, 아래의 선택 요소를 덮습니다. 그러나 IE6에는 세 가지 상황이 있습니다. 플로팅 레이어 A는 여전히 정상입니다. 플로팅 레이어 B의 주요 부분은 선택 요소를 부분적으로 덮지만 플로팅 레이어 3의 테두리는 선택 요소를 덮을 수 없습니다. 요소 전혀. 이러한 현상이 나타나는 이유는 IE6에서는 브라우저가 select 요소를 윈도우 수준 요소로 취급하기 때문입니다. 이때 div나 기타 일반 요소는 z-index를 아무리 높게 설정해도 select 요소를 덮을 수 없습니다. 위의 예와 같이 창 수준 요소의 iframe에 대한 선택을 커버합니다. 플로팅 레이어 C는 단지 div 플로팅 레이어입니다. 여기서는 자세히 설명하지 않겠습니다. 플로팅 레이어 B의 구조만 살펴보겠습니다.

플로팅 레이어 B

div를 사용하여 실제 필수 콘텐츠 div와 iframe 요소를 함께 배치합니다. 해당 스타일은 다음과 같습니다.
.containDiv{위치: 절대; 상단: 140px; 60px; .maskIframe{위치: 절대; 왼쪽: -1px; z-색인: -1;border:1px solid #000;height:50px;width:50px;_height:48px;_width:48px;} .mainDiv{배경:#EBAC3B;너비:50px;높이:50px;}
플로팅 레이어 B는 iframe을 사용하여 containDiv의 절대 위치를 지정하고 z-index: -1;을 설정한 다음 실제로 콘텐츠가 포함된 아래의 mainDiv가 iframe을 덮도록 허용합니다. 이때 iframe은 선택 영역을 덮을 수 있습니다. 요소 및 간접적으로 mainDiv는 선택 요소도 포함합니다. 하지만 플로팅 레이어 B는 여전히 완벽하지 않습니다. 그 이유는 여기서 플로팅 레이어 B의 테두리가 iframe 테두리를 사용하기 때문입니다. iframe 자체는 선택 항목을 덮을 수 있지만 해당 테두리는 그렇지 못하므로 플로팅 레이어 B의 상황이 나타납니다.
플로팅 레이어 A는 이 문제를 해결하고 이상을 달성합니다. iframe을 mainDiv 위쪽, 아래쪽, 왼쪽 및 오른쪽보다 1px 더 크게 만든 다음 mainDiv에 테두리를 제공한다는 점을 제외하면 기본적으로 플로팅 레이어 B와 동일합니다. , 플로팅 레이어 테두리는 mainDiv에서 제공되고 전체 mainDiv와 테두리는 iframe 위에 있으므로 이상적인 효과가 달성됩니다!
select의 두 번째 문제는 IE에서 옵션을 동적으로 생성하는 문제입니다. 위의 두 번째 질문의 예를 보면 (FF 전용) 링크를 클릭하면 FF 아래의 선택 요소에 3개의 옵션 요소를 추가할 수 있지만, (범용) 링크를 클릭하면 IE에서는 작동하지 않습니다. IE 및 FF 아래의 선택 요소에 3개의 옵션 요소를 추가할 수 있습니다. 그 이유는 select 요소의 innerHTML 속성을 통해 option 요소에 첫 번째 링크가 추가되기 때문입니다.
document.getElementById("addSelect").innerHTML = "ABC";
FF에서는 문제가 되지 않지만 IE에서는 이 방법을 사용하여 선택 요소에 옵션 하위 요소를 추가할 수 없습니다. 대신 두 번째 링크에서 제공하는 방법을 사용해야 합니다.
document.getElementById("addSelect").options.add(new Option("A","A",false,true));