드롭다운 목록 상자를 덮는 레이어 문제 해결

드롭다운 목록 상자를 덮는 레이어 문제 해결_경험 교환

WBOY

풀어 주다： 2016-05-16 12:04:56

원래의

1451명이 탐색했습니다.

IE6真的让人很郁闷。但是就目前而言，我们还是不能放弃对IE6的兼容。从下面的我的blog访问统计分析数据来看，使用IE6的还是占有绝对主流的。

本来想顺便说说web标准中这个“标准”到底是个什么东西，但是发现，还是明日另起一篇吧。因为这个不是“顺便说说”就能说清楚的。我们今天还是不如这个正题——如何让层盖住下拉列表框？

非常郁闷或者非常幸运的说一下：这个问题只会出现IE7之前那些对web标准支持不好的浏览器中（例如现在非常主流的IE6 -_-b... ）,IE7和FF都不会出现这个问题。截图为证：

出现上面情况的参考代码：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Css Javascript Demotitle>
<meta name="Generator" content="EditPlus"/>
<meta name="Author" content="JustinYoung"/>
<meta name="Keywords" content="CssStandard JavascriptDemo,B/S,JustinYoung"/>
<meta name="Description" content="This demo from JustinYoung's Blog:Yes!B/S!"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#divUp{
    z-index:99;
    position:absolute;
    background-color:red;
    width:100;
    height:18;
    overflow:hidden;
    height:60px;
}

#ddlTest{
    width:200;
    z-index:1;
}
style>
<body>
<div id="divUp">aaaaaaa<br>bbbbbbb<br>cccccccdiv>
<br/>
<select id="ddlTest"><option>test0<option>test1<option>test2<option>test3select>
html>

IE6의 경우 실제로 해결책이 없습니다. 이 방법이 "불만족스럽다"는 점을 인정해야 하지만 현재로서는 가장 효과적인 방법입니다. 즉, 드롭다운 목록 위에 iframe을 추가한 다음 div 레이어가 iframe 위에 떠 있도록 하여 div가 드롭다운 목록을 "덮을" 수 있도록 하는 것입니다. "왜"라고 묻고 싶다면 우선 축하합니다. 지식 대신 인터넷에서 해결책 만 찾는 많은 사람들과 달리 당신은 좋은 동급생입니다 (예 : 나 -_-b...) , 그리고 나서 나는 이것에 대한 이유가 없다고 말할 것입니다. 이것은 IE6의 이상한 분석입니다. 이유를 물어봐야 한다면 IE6에서 div와 select만 있는 경우 z-index가 어떻게 설정되었는지에 관계없이 div 레이어는 항상 select 태그에 의해 짓밟히지만 iframe은 가능하다는 점만 말씀드릴 수 있습니다. 따라서 다음 방법을 사용하면 iframe이 select 위에 있고 div가 iframe을 타고 select로 올라가기 때문에 문제를 해결할 수 있습니다. Pekingese dog(div)은 일반적으로 다음과 같습니다. 큰 늑대개(선택)에게 밟혀 괴롭힘을 당했습니다. 이날 징바의 주인(아이프레임)은 징바를 끌어안고 큰 늑대개 발바닥을 밟았습니다. 이때 Jingba는 자연스럽게 큰 늑대개 위에 올라섰습니다.너무 멀리 가고 있습니다. 해결 방법은 다음과 같습니다.

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html>
<머리>
<제목>Css 자바스크립트 데모제목>
<메타 이름="생성기" 콘텐츠="EditPlus "/>
<메타 이름="저자 " 내용="저스틴영"/>
< 메타 이름="키워드" 내용="CssStandard JavascriptDemo,B/S,JustinYoung"/> ;
<메타 이름="설명" 내용="JustinYoung 블로그의 데모:Yes!B/S!"/>
<메타 http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<스타일 유형="text/css ">
본문{
글꼴 크기:작다;
}

#zindexDiv{
위치:절대;
z-색인:50;
너비:식(this.nextSibling.offsetWidth);
높이:식(this. nextSibling.offsetHeight);
top:표현식(this.nextSibling.offsetTop);
왼쪽:식(this.nextSibling.offsetLeft);
/* background-color: green; ff에 이 문장을 게시하면 징바, 늑대개, 주인*/
}

#divUp{
z-index: 99;
위치:절대;
배경색:빨간색;
너비: 100;
높이:18;
오버플로 :숨김;
높이:60px ;
}

#ddlTest{
너비:200;
z-색인:1;
}
스타일>

<본체>
<iframeid="zindexDiv" frameborder="0">iframe>
<divid="divUp" >아아아아아아<br>bbbbbbbb< br>ccccccdiv>
<br/>
<ID="ddlTest"><옵션>테스트0<옵션>테스트1<옵션 >테스트2<옵션>테스트3< /선택>
html>

키워드:层列表框,div和列表框,列表框盖住层,怎么让层盖住列表框,列表框和层,下列列表框,如何用层盖住下拉列表框