Heim >Web-Frontend >CSS-Tutorial >Lösung des Problems der Ebene, die das Dropdown-Listenfeld_Erfahrungsaustausch abdeckt
Lösung des Problems der Ebene, die das Dropdown-Listenfeld_Erfahrungsaustausch abdeckt
- WBOYOriginal
- 2016-05-16 12:04:561485Durchsuche
IE6真的让人很郁闷。但是就目前而言，我们还是不能放弃对IE6的兼容。从下面的我的blog访问统计分析数据来看，使用IE6的还是占有绝对主流的。
本来想顺便说说web标准中这个“标准”到底是个什么东西，但是发现，还是明日另起一篇吧。因为这个不是“顺便说说”就能说清楚的。我们今天还是不如这个正题——如何让层盖住下拉列表框？
非常郁闷或者非常幸运的说一下：这个问题只会出现IE7之前那些对web标准支持不好的浏览器中（例如现在非常主流的IE6 -_-b... ）,IE7和FF都不会出现这个问题。截图为证：
出现上面情况的参考代码：
Für IE6 haben wir eigentlich keine Lösung. Obwohl wir zugeben müssen, dass diese Methode „frustrierend“ ist, ist sie derzeit die effektivste Methode. Das heißt, über der Dropdown-Liste einen Iframe hinzuzufügen und dann die Div-Ebene über dem Iframe schweben zu lassen, damit das Div die Dropdown-Liste „abdecken“ kann. Wenn Sie nach dem „Warum“ fragen möchten, dann zunächst einmal herzlichen Glückwunsch, Sie sind ein guter Klassenkamerad, im Gegensatz zu vielen Menschen, die im Internet nur nach Lösungen statt nach Wissen suchen (z. B. I-_-b...) , und dann sage ich Ihnen, es gibt keinen Grund dafür, das ist die seltsame Analyse von IE6. Wenn Sie sich fragen müssen, warum, kann ich Ihnen nur sagen, dass in IE6, wenn es nur div und select gibt, unabhängig davon, wie Ihr Z-Index eingestellt ist, die div-Ebene immer vom select-Tag mit Füßen getreten wird, während dies beim iframe der Fall sein kann Daher kann die folgende Methode das Problem lösen, da sich der Iframe über dem Select befindet und das Div auf dem Iframe reitet und zum Select klettert. Es ist ein bisschen so: Ein Pekingese-Hund (div) bekommt normalerweise An diesem Tag umarmte Jingbas Besitzer (iframe) Jingba und trat ihm auf die Sohlen. Zu diesem Zeitpunkt befand sich Jingba natürlich auf dem großen Wolfshund.Ich gehe zu weit, hier ist der Lösungscode:
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>
<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>
Für IE6 haben wir eigentlich keine Lösung. Obwohl wir zugeben müssen, dass diese Methode „frustrierend“ ist, ist sie derzeit die effektivste Methode. Das heißt, über der Dropdown-Liste einen Iframe hinzuzufügen und dann die Div-Ebene über dem Iframe schweben zu lassen, damit das Div die Dropdown-Liste „abdecken“ kann. Wenn Sie nach dem „Warum“ fragen möchten, dann zunächst einmal herzlichen Glückwunsch, Sie sind ein guter Klassenkamerad, im Gegensatz zu vielen Menschen, die im Internet nur nach Lösungen statt nach Wissen suchen (z. B. I-_-b...) , und dann sage ich Ihnen, es gibt keinen Grund dafür, das ist die seltsame Analyse von IE6. Wenn Sie sich fragen müssen, warum, kann ich Ihnen nur sagen, dass in IE6, wenn es nur div und select gibt, unabhängig davon, wie Ihr Z-Index eingestellt ist, die div-Ebene immer vom select-Tag mit Füßen getreten wird, während dies beim iframe der Fall sein kann Daher kann die folgende Methode das Problem lösen, da sich der Iframe über dem Select befindet und das Div auf dem Iframe reitet und zum Select klettert. Es ist ein bisschen so: Ein Pekingese-Hund (div) bekommt normalerweise An diesem Tag umarmte Jingbas Besitzer (iframe) Jingba und trat ihm auf die Sohlen. Zu diesem Zeitpunkt befand sich Jingba natürlich auf dem großen Wolfshund.Ich gehe zu weit, hier ist der Lösungscode:
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html>
<Kopf>
<title>Css Javascript Demotitle>
<meta name="Generator" content="EditPlus "/>
<meta name="Autor "Inhalt="JustinYoung"/>
< meta name="Keywords" content="CssStandard JavascriptDemo,B/S,JustinYoung"/> ;
<Meta Name="Beschreibung"Inhalt="Diese Demo aus JustinYoungs Blog:Yes!B/S!"/>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<Stil Typ="text/css ">
body{
font-size:klein;
}
#zindexDiv{
Position:absolut;
z-index:50;
Breite:expression(this.nextSibling.offsetWidth);
height:expression(this. nextSibling.offsetHeight);
top:expression(this.nextSibling.offsetTop);
left:expression(this.nextSibling.offsetLeft);
/*Hintergrundfarbe: grün; Veröffentlichen Sie diesen Satz in ff, und Sie werden die Metapher von Jingba, Wolfshund und Meister verstehen*/
}
#divUp{
z-index: 99;
Position:absolut;
Hintergrundfarbe:rot;
Breite: 100;
Höhe:18;
Überlauf :versteckt;
Höhe:60px ;
}
#ddlTest{
width:200;
z-index:1;
}
Stil>
<body>
<iframe id="zindexDiv" frameborder="0">iframe>
<div id="divUp" >aaaaaaa<br>bbbbbbb< br>cccccccdiv>
<br/>
<wählen Sie id="ddlTest"><Option>test0<Option>test1<Option >Test2<Option>Test3< /wählen>
html>
<html>
<Kopf>
<title>Css Javascript Demotitle>
<meta name="Generator" content="EditPlus "/>
<meta name="Autor "Inhalt="JustinYoung"/>
< meta name="Keywords" content="CssStandard JavascriptDemo,B/S,JustinYoung"/> ;
<Meta Name="Beschreibung"Inhalt="Diese Demo aus JustinYoungs Blog:Yes!B/S!"/>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<Stil Typ="text/css ">
body{
font-size:klein;
}
#zindexDiv{
Position:absolut;
z-index:50;
Breite:expression(this.nextSibling.offsetWidth);
height:expression(this. nextSibling.offsetHeight);
top:expression(this.nextSibling.offsetTop);
left:expression(this.nextSibling.offsetLeft);
/*Hintergrundfarbe: grün; Veröffentlichen Sie diesen Satz in ff, und Sie werden die Metapher von Jingba, Wolfshund und Meister verstehen*/
}
#divUp{
z-index: 99;
Position:absolut;
Hintergrundfarbe:rot;
Breite: 100;
Höhe:18;
Überlauf :versteckt;
Höhe:60px ;
}
#ddlTest{
width:200;
z-index:1;
}
Stil>
<body>
<iframe id="zindexDiv" frameborder="0">iframe>
<div id="divUp" >aaaaaaa<br>bbbbbbb< br>cccccccdiv>
<br/>
<wählen Sie id="ddlTest"><Option>test0<Option>test1<Option >Test2<Option>Test3< /wählen>
html>
Schlüsselwort:列表框,div和列表框,列表框盖住层,怎么让层盖住列表框,列表框和层,下列列表框,如何用层盖住下拉列表框
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verbessern Sie die Effizienz von Webseiten. Verwenden Sie YSlow, um zu erfahren, warum Ihr Web-Slow_Experience-Austausch erfolgtNächster Artikel：Verbessern Sie die Effizienz von Webseiten. Verwenden Sie YSlow, um zu erfahren, warum Ihr Web-Slow_Experience-Austausch erfolgt