HTML의 선택 요소에 대한 질문은 여러 곳에서 제기되었으며, 얼마 전에 프로젝트에서 선택 요소에 대한 두 가지 작은 질문을 일으켰습니다. 여기에 요약하겠습니다. 첫 번째는 가장 유명합니다. Div 플로팅 층이 IE6에서 선택 요소를 덮을 수없는 일반적인 문제입니다. 첫째, 다음 예제가 제공됩니다. 참고 : Firfox 및 IE7에서 보는 경우
HTML의 선택 요소에 대한 질문은 여러 곳에서 제기되었으며, 얼마 전에 프로젝트에서 선택 요소에 대한 두 가지 작은 질문을 일으켰습니다. 여기에 요약하겠습니다.
관련 기사 : 플래시 레이어로 다루는 DIV 레이어 문제에 대한 솔루션
첫 번째는 가장 유명합니다. Div 플로팅 층이 IE6에서 선택 요소를 덮을 수없는 일반적인 문제입니다. 먼저 다음 예제가 제공됩니다.
참고 : Firfox와 IE7에서 모두를 보면 결과가 동일합니다. 부동 층 A, B 및 C는 정상적인 현실, 즉 아래 선택 요소가 차단됩니다. 그러나 IE6 하에서는 세 가지 다른 상황이 있으며, 플로팅 층 A는 여전히 정상입니다. 플로팅 층 B 본체는 선택 요소를 커버하지만 플로팅 층의 프레임은 선택 요소를 덮을 수 없습니다. 플로팅 레이어 3은 선택 요소를 전혀 덮을 수 없습니다. 이 현상의 이유는 IE6에서 브라우저가 선택 요소를 창 수준 요소로 간주하기 때문입니다. 현재 DIV 또는 다른 일반 요소는 Z-INDEX가 얼마나 높게 설정되어 있더라도 선택 요소를 다룰 수 없지만, SELECT는 Window 레벨 요소 인 iframe에 의해 차단 될 수 있습니다. 이것이 위의 예가하는 방식입니다. 부동 층 C는 단지 div 플로팅 층입니다. 나는 그것에 대해 더 이야기하지 않을 것입니다. 부동 층 B의 구조를보십시오.
<div class = conlaydiv> <iframe class = maskiframe> </iframe> <div class = maindiv> 부동 레이어 b </div> </div>
DIV를 사용하여 실제 컨텐츠 DIV와 iframe 요소를 함께 넣으면 해당 스타일이 다음과 같습니다.
.ContainDiv {위치 : 절대; 상단 : 140px; 왼쪽 : 60px; } .maskiframe {위치 : 절대; 왼쪽 : -1px; 상단 : -1px; z -index : -1; 테두리 : 1px 솔리드 #000; 높이 : 50px; 너비 : 50px; _height : 48px; _width : 48px;}. MainDiv {배경 : #ebac3b; 너비 : 50px; 높이 : 50px;}
플로팅 층 B는 iframe을 사용하여 절대적으로 위치하고 z -index를 설정합니다. -1; 포함 된 Div에서는 Iframe을 다루기 위해 아래에 컨텐츠를 넣는 Maindiv를 허용합니다. 이 시점에서 iframe은 선택 요소를 덮을 수 있으며 간접적으로 MainDIV가 선택 요소를 커버합니다. 그러나, 부유 식 층 B는 Iframe 경계를 사용하기 때문에 플로팅 층 B는 여전히 불완전하다. iframe 자체는 SELECT를 다룰 수 있지만 테두리는 할 수 없으므로 부동 층 B가 발생합니다.
플로팅 층 A는이 문제를 해결하고 이상적인 사고를 달성했습니다. 기본적으로 플로팅 레이어 B와 동일하지만 IFRAME를 MainDiv, 아래쪽, 왼쪽 및 오른쪽 이상으로 만든 다음 MainDIV 테두리를 제공한다는 점을 제외하고는 기본적으로 부유 식 층 B와 동일합니다. 이런 식으로, 부동 경계는 Maindiv에 의해 제공되며 전체 Maindiv와 국경은 Iframe에 있으므로 이상적인 효과가 달성됩니다!
Select의 두 번째 문제는 IE에서 옵션 옵션을 동적으로 생성하는 문제입니다. 위의 두 번째 질문의 예를 참조하십시오. (Limited FF) 링크를 클릭하면 FF의 선택 요소에 3 개의 옵션 요소를 추가 할 수 있지만 IE에서는 불가능합니다. (일반) 링크를 클릭 할 때 IE 및 FF의 선택 요소에 3 개의 옵션 요소를 추가 할 수 있습니다. 그 이유는 첫 번째 링크가 선택 요소의 innerHTML 속성을 통해 옵션 요소를 추가하기 때문입니다.
document.getElementById (addSelect) .innerHtml = abc;
FF에서는 문제가 없지만이 방법을 통해 옵션 자식 요소를 선택 요소에 추가 할 수는 없지만 두 번째 링크가 제공하는 방법이 필요합니다.
document.getElementById (addSelect) .Options.Add (새 옵션 (a, a, false, true));