Maison >interface Web >tutoriel CSS >Solution au problème de couche couvrant la liste déroulante box_Experience Exchange
Solution au problème de couche couvrant la liste déroulante box_Experience Exchange
- WBOYoriginal
- 2016-05-16 12:04:561487parcourir
IE6真的让人很郁闷。但是就目前而言，我们还是不能放弃对IE6的兼容。从下面的我的blog访问统计分析数据来看，使用IE6的还是占有绝对主流的。
本来想顺便说说web标准中这个“标准”到底是个什么东西，但是发现，还是明日另起一篇吧。因为这个不是“顺便说说”就能说清楚的。我们今天还是不如这个正题——如何让层盖住下拉列表框？
非常郁闷或者非常幸运的说一下：这个问题只会出现IE7之前那些对web标准支持不好的浏览器中（例如现在非常主流的IE6 -_-b... ）,IE7和FF都不会出现这个问题。截图为证：
出现上面情况的参考代码：
Pour IE6, nous n'avons en réalité aucune solution. Même s'il faut admettre que cette méthode est "frustrante", c'est actuellement la méthode la plus efficace. Il s'agit d'ajouter une iframe au-dessus de la liste déroulante, puis de laisser la couche div flotter au-dessus de l'iframe, afin que la div puisse "couvrir" la liste déroulante. Si vous voulez demander "pourquoi", alors tout d'abord félicitations, vous êtes un bon camarade de classe, contrairement à beaucoup de gens qui recherchent uniquement des solutions sur Internet au lieu de connaissances (par exemple, I -_-b...) , et puis je vous dirai qu'il n'y a aucune raison à cela, c'est l'analyse étrange d'IE6. Si vous devez demander pourquoi, je peux seulement vous dire que dans IE6, s'il n'y a que div et select, peu importe la façon dont votre z-index est défini, la couche div sera toujours piétinée par la balise select, tandis que l'iframe peut être rampé jusqu'à la sélection. Par conséquent, la méthode suivante peut résoudre le problème car l'iframe est au-dessus de la sélection, et le div monte sur l'iframe et grimpe jusqu'à la sélection. C'est un peu comme ceci : un chien pékinois (div ) obtient généralement. piétiné et intimidé par le gros chien-loup (sélectionner). Ce jour-là, le propriétaire de Jingba (iframe) a serré Jingba dans ses bras et a marché sur les semelles du gros chien-loup. A cette époque, Jingba était naturellement au dessus du gros chien-loup.Saya pergi terlalu jauh, inilah kod penyelesaian:
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>
Pour IE6, nous n'avons en réalité aucune solution. Même s'il faut admettre que cette méthode est "frustrante", c'est actuellement la méthode la plus efficace. Il s'agit d'ajouter une iframe au-dessus de la liste déroulante, puis de laisser la couche div flotter au-dessus de l'iframe, afin que la div puisse "couvrir" la liste déroulante. Si vous voulez demander "pourquoi", alors tout d'abord félicitations, vous êtes un bon camarade de classe, contrairement à beaucoup de gens qui recherchent uniquement des solutions sur Internet au lieu de connaissances (par exemple, I -_-b...) , et puis je vous dirai qu'il n'y a aucune raison à cela, c'est l'analyse étrange d'IE6. Si vous devez demander pourquoi, je peux seulement vous dire que dans IE6, s'il n'y a que div et select, peu importe la façon dont votre z-index est défini, la couche div sera toujours piétinée par la balise select, tandis que l'iframe peut être rampé jusqu'à la sélection. Par conséquent, la méthode suivante peut résoudre le problème car l'iframe est au-dessus de la sélection, et le div monte sur l'iframe et grimpe jusqu'à la sélection. C'est un peu comme ceci : un chien pékinois (div ) obtient généralement. piétiné et intimidé par le gros chien-loup (sélectionner). Ce jour-là, le propriétaire de Jingba (iframe) a serré Jingba dans ses bras et a marché sur les semelles du gros chien-loup. A cette époque, Jingba était naturellement au dessus du gros chien-loup.Saya pergi terlalu jauh, inilah kod penyelesaian:
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html>
<kepala>
<tajuk>Css Javascript Demotajuk>
<meta nama="Generator" kandungan="EditPlus "/>
<meta nama="Pengarang " kandungan="JustinYoung"/>
< meta nama="Kata kunci" kandungan="CssStandard JavascriptDemo,B/S,JustinYoung"/> ;
<meta nama="Keterangan" kandungan="Demo ini dari Blog JustinYoung:Yes!B/S!"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<gaya taip="text/css ">
badan{
saiz fon:kecil;
}
#zindexDiv{
position :absolue;
z-index:50;
largeur:expression(this.nextSibling.offsetWidth);
hauteur:expression(this. nextSibling.offsetHeight);
top:expression(this.nextSibling.offsetTop);
gauche:expression(this.nextSibling.offsetLeft);
/*background-color: green; Publiez cette phrase en ff, et vous comprendrez la métaphore de Jingba, chien-loup, et maître*/
}
#divUp{
z-index : 99;
position:absolue;
couleur de fond:rouge;
largeur: 100;
hauteur:18;
débordement :caché;
hauteur:60px ;
}
#ddlTest{
largeur :200;
z-index:1;
>
style>
<corps>
<iframe id="zindexDiv" frameborder="0">iframe>
<div id="divUp" >aaaaaaa<br>bbbbbbb< br>cccccccdiv>
<br/>
<sélectionnez id="ddlTest"><option>test0<option>test1<option >test2<option>test3< /sélectionner>
html>
<html>
<kepala>
<tajuk>Css Javascript Demotajuk>
<meta nama="Generator" kandungan="EditPlus "/>
<meta nama="Pengarang " kandungan="JustinYoung"/>
< meta nama="Kata kunci" kandungan="CssStandard JavascriptDemo,B/S,JustinYoung"/> ;
<meta nama="Keterangan" kandungan="Demo ini dari Blog JustinYoung:Yes!B/S!"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<gaya taip="text/css ">
badan{
saiz fon:kecil;
}
#zindexDiv{
position :absolue;
z-index:50;
largeur:expression(this.nextSibling.offsetWidth);
hauteur:expression(this. nextSibling.offsetHeight);
top:expression(this.nextSibling.offsetTop);
gauche:expression(this.nextSibling.offsetLeft);
/*background-color: green; Publiez cette phrase en ff, et vous comprendrez la métaphore de Jingba, chien-loup, et maître*/
}
#divUp{
z-index : 99;
position:absolue;
couleur de fond:rouge;
largeur: 100;
hauteur:18;
débordement :caché;
hauteur:60px ;
}
#ddlTest{
largeur :200;
z-index:1;
>
style>
<corps>
<iframe id="zindexDiv" frameborder="0">iframe>
<div id="divUp" >aaaaaaa<br>bbbbbbb< br>cccccccdiv>
<br/>
<sélectionnez id="ddlTest"><option>test0<option>test1<option >test2<option>test3< /sélectionner>
html>
mot-clé :层 列表框,div和列表框,列表框盖住层,怎么让层盖住列表框,列桨框和层,下列列表框,如何用层盖住下拉列表框
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Améliorer l'efficacité des pages web Utilisez YSlow pour savoir pourquoi votre web Slow_Experience échangeArticle suivant：Améliorer l'efficacité des pages web Utilisez YSlow pour savoir pourquoi votre web Slow_Experience échange