今天来学习怎样让层挡住下拉列表框？成绩办理计划
人曾这样说“自从css出现之后，HTML终于摆脱了杂乱无章的恶梦，开始将页面内容与样式分离。”[*]
[*]
起首，我们不能不供认IE7之前的IE系列扫瞄器对web尺度撑持的真的很差。IE6的诡异剖析形式让一些入手下手进修web尺度的伴侣总是碰着不克不及了解的成绩。出格是这个IE6向IE7过渡的长短年月。IE6真的让人很忧郁。可是就今朝而言，我们仍是不克不及保持对IE6的兼容。从上面的我的blog会见统计剖析数据来看，利用IE6的仍是占据相对支流的。
原本想特地说说web尺度中这个“尺度”究竟是个甚么器材，可是发明，仍是嫡另起一篇吧。由于这个不是“特地说说”就可以说分明的。我们明天仍是不如这个正题——怎样让层挡住下拉列表框？
十分忧郁大概十分侥幸的说一下：这个成绩只会呈现IE7之前那些对web尺度撑持欠好的扫瞄器中（比方如今十分支流的IE6-_-b...）,IE7和FF都不会呈现这个成绩。截图为证：
呈现下面情形的参考代码：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>CssJavascriptDemo</title><metaname="Generator"content="EditPlus"/><metaname="Author"content="JustinYoung"/><metaname="Keywords"content="CssStandardJavascriptDemo,B/S,JustinYoung"/><metaname="Description"content="ThisdemofromJustinYoungsBlog:Yes!B/S!"/><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><styletype="text/css">#divUp{z-index:99;position:absolute;background-color:red;width:100px;height:18px;overflow:hidden;height:60px;}#ddlTest{width:200px;z-index:1;}</style><body><divid="divUp">aaaaaaa<br>bbbbbbb<br>ccccccc</div><br/><selectid="ddlTest"><option>test0<option>test1<option>test2<option>test3</select></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
关于IE6，实在我们也并非没有举措，固然我们不能不供认这个举措很“挫”，可是这个是今朝最无效的举措。那就是鄙人拉列表上方加一个iframe，然后让div层浮在iframe上方，如许，就可以使div“挡住”下拉列表。假如你要问“为何”，那末，起首祝贺你，你是个好同砚，不像良多人只在网上找办理举措，而不是找常识（比方我-_-b...），然后我会告知你，这个没无为甚么，这个就是IE6的诡异剖析。假如必定要问为何，我只能告知你，在IE6看来，假如只要div和select，不管你的z-index怎样设置,div的层永久被会被select标签踩在脚底，而iframe则能够爬到select头上，以是，上面的办法之以是能办理成绩，是由于iframe在select上方，而div搭着iframe的顺风车也爬到了select的头上，这有点像如许：一条京叭狗（div）平常总是被年夜狼狗（select）踩到脚底欺侮，是日，京叭的仆人（iframe）抱着京叭把年夜狼狗踩到了脚底。这时候候京叭天然就在年夜狼狗的头上了。扯远了，给出办理计划代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>CssJavascriptDemo</title><metaname="Generator"content="EditPlus"/><metaname="Author"content="JustinYoung"/><metaname="Keywords"content="CssStandardJavascriptDemo,B/S,JustinYoung"/><metaname="Description"content="ThisdemofromJustinYoungsBlog:Yes!B/S!"/><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><styletype="text/css">body{font-size:small;}#zindexDiv{position:absolute;z-index:50;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);/*background-color:green;在ff中将这句话放出来，你就会分明京叭、狼狗、仆人的比方*/}#divUp{z-index:99;position:absolute;background-color:red;width:100px;height:18px;overflow:hidden;height:60px;}#ddlTest{width:200px;z-index:1;}</style><body><iframeid="zindexDiv"frameborder="0"></iframe><divid="divUp">aaaaaaa<br>bbbbbbb<br>ccccccc</div><br/><selectid="ddlTest"><option>test0<option>test1<option>test2<option>test3</select></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
我这个时候还没意识到div在一些新人眼中产生的误导会比我想象的严重，直到第二个美工上班。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。
页:
[1]