Rumah >hujung hadapan web >tutorial css >Penyelesaian kepada masalah lapisan yang meliputi kotak senarai juntai bawah_Pertukaran pengalaman
Penyelesaian kepada masalah lapisan yang meliputi kotak senarai juntai bawah_Pertukaran pengalaman
- WBOYasal
- 2016-05-16 12:04:561503semak imbas
IE6真的让人很郁闷。但是就目前而言，我们还是不能放弃对IE6的兼容。从下面的我的blog访问统计分析数据来看，使用IE6的还是占有绝对主流的。
本来想顺便说说web标准中这个“标准”到底是个什么东西，但是发现，还是明日另起一篇吧。因为这个不是“顺便说说”就能说清楚的。我们今天还是不如这个正题——如何让层盖住下拉列表框？
非常郁闷或者非常幸运的说一下：这个问题只会出现IE7之前那些对web标准支持不好的浏览器中（例如现在非常主流的IE6 -_-b... ）,IE7和FF都不会出现这个问题。截图为证：
出现上面情况的参考代码：
Untuk IE6, kami sebenarnya tidak mempunyai penyelesaian Walaupun kami harus mengakui bahawa kaedah ini "mengecewakan", ia adalah kaedah yang paling berkesan pada masa ini. Iaitu untuk menambah iframe di atas senarai juntai bawah, dan kemudian biarkan lapisan div terapung di atas iframe, supaya div boleh "menutup" senarai juntai bawah. Jika anda ingin bertanya "mengapa", maka, pertama sekali, tahniah, anda adalah rakan sekelas yang baik, tidak seperti kebanyakan orang yang hanya mencari penyelesaian di Internet dan bukannya pengetahuan (contohnya, saya -_-b...) , dan kemudian saya akan memberitahu Anda, tidak ada sebab untuk ini, ini adalah analisis pelik IE6. Jika anda mesti bertanya mengapa, saya hanya boleh memberitahu anda bahawa dalam IE6, jika terdapat hanya div dan pilih, tidak kira bagaimana indeks z anda ditetapkan, lapisan div akan sentiasa diinjak oleh tag pilih, manakala iframe boleh merangkak ke pilih Oleh itu, kaedah berikut boleh menyelesaikan masalah kerana iframe berada di atas pilih, dan div menunggang pada iframe dan naik ke pilih Ia adalah sedikit seperti ini: Anjing Peking (div ) biasanya mendapat dipijak dan dibuli oleh anjing serigala besar (pilihan) Pada hari ini, pemilik Jingba (iframe) memeluk Jingba dan memijak tapak kaki anjing serigala besar itu. Pada masa ini, Jingba secara semula jadi berada di atas anjing serigala besar.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>
Untuk IE6, kami sebenarnya tidak mempunyai penyelesaian Walaupun kami harus mengakui bahawa kaedah ini "mengecewakan", ia adalah kaedah yang paling berkesan pada masa ini. Iaitu untuk menambah iframe di atas senarai juntai bawah, dan kemudian biarkan lapisan div terapung di atas iframe, supaya div boleh "menutup" senarai juntai bawah. Jika anda ingin bertanya "mengapa", maka, pertama sekali, tahniah, anda adalah rakan sekelas yang baik, tidak seperti kebanyakan orang yang hanya mencari penyelesaian di Internet dan bukannya pengetahuan (contohnya, saya -_-b...) , dan kemudian saya akan memberitahu Anda, tidak ada sebab untuk ini, ini adalah analisis pelik IE6. Jika anda mesti bertanya mengapa, saya hanya boleh memberitahu anda bahawa dalam IE6, jika terdapat hanya div dan pilih, tidak kira bagaimana indeks z anda ditetapkan, lapisan div akan sentiasa diinjak oleh tag pilih, manakala iframe boleh merangkak ke pilih Oleh itu, kaedah berikut boleh menyelesaikan masalah kerana iframe berada di atas pilih, dan div menunggang pada iframe dan naik ke pilih Ia adalah sedikit seperti ini: Anjing Peking (div ) biasanya mendapat dipijak dan dibuli oleh anjing serigala besar (pilihan) Pada hari ini, pemilik Jingba (iframe) memeluk Jingba dan memijak tapak kaki anjing serigala besar itu. Pada masa ini, Jingba secara semula jadi berada di atas anjing serigala besar.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{
kedudukan:mutlak;
z-index:50;
lebar:ungkapan(this.nextSibling.offsetWidth);
tinggi:ungkapan(ini. nextSibling.offsetHeight);
atas:ungkapan(this.nextSibling.offsetTop);
kiri:ungkapan(this.nextSibling.offsetLeft);
/*warna latar: hijau; Terbitkan ayat ini dalam ff, dan anda akan memahami metafora Jingba, anjing serigala dan tuan*/
}
#divUp{
z-index: 99;
kedudukan:mutlak;
warna latar belakang:merah;
lebar: 100;
tinggi:18;
limpahan :tersembunyi;
tinggi:60px ;
}
#ddlTest{
lebar:200;
z-index:1;
}
gaya>
<badan>
<iframe id="zindexDiv" frameborder="0">iframe>
<div id="divUp" >aaaaaaa<br>bbbbbbb< br>cccccccdiv>
<br/>
<pilih id="ddlTest"><pilihan>test0<pilihan>test1<pilihan >ujian2<pilihan>ujian3< /pilih>
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{
kedudukan:mutlak;
z-index:50;
lebar:ungkapan(this.nextSibling.offsetWidth);
tinggi:ungkapan(ini. nextSibling.offsetHeight);
atas:ungkapan(this.nextSibling.offsetTop);
kiri:ungkapan(this.nextSibling.offsetLeft);
/*warna latar: hijau; Terbitkan ayat ini dalam ff, dan anda akan memahami metafora Jingba, anjing serigala dan tuan*/
}
#divUp{
z-index: 99;
kedudukan:mutlak;
warna latar belakang:merah;
lebar: 100;
tinggi:18;
limpahan :tersembunyi;
tinggi:60px ;
}
#ddlTest{
lebar:200;
z-index:1;
}
gaya>
<badan>
<iframe id="zindexDiv" frameborder="0">iframe>
<div id="divUp" >aaaaaaa<br>bbbbbbb< br>cccccccdiv>
<br/>
<pilih id="ddlTest"><pilihan>test0<pilihan>test1<pilihan >ujian2<pilihan>ujian3< /pilih>
html>
kata kunci:层 列表框,div和列表框,列表框盖住层,爗住层,爗层表框和层,下列列表框,如何用层盖住下拉列表框
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn