关于select元素的两个小问题
作者:zhusun 来源:口碑网ued 发布时间:2008-12-25 13:41:00
在html中关于select元素的问题在很多地方都提出过,而在前段时间的项目中,刚好遇到了关于select元素的两个小问题,这里进行一下总结。
第一就是比较有名的:一般div浮层在IE6下无法遮盖select元素的问题。
首先提供了下面一个实例:
注解:如果你在FirFox下和IE7下看都的结果是一样的:浮层A、B、C都可以正常的现实,即遮住下面的select元素。但是在IE6下则是3种不一样的情况,浮层A依然正常;浮层B主体部分遮盖住了select元素,但是浮层的边框却无法遮住select元素;浮层3则完全无法遮盖select元素。造成这个现象的原因是在IE6下,浏览器将select元素视为窗口级元素,这时div或者其它的普通元素无论z-index设置的多高都是无法遮住select元素的,但是可以通过同为窗口级元素的iframe来遮住select,上面的例子就是这样做的。浮层C仅仅是一个div浮层,这里不多讲,直接看浮层B的结构:
<div class="containDiv" > <iframe class="maskIframe" ></iframe> <div class="mainDiv" >浮层B</div> </div>
用一个div将实际需要的内容div和一个iframe元素放在一起,它们对应的样式为:
.containDiv{position: absolute; top: 140px; left: 60px; }
.maskIframe{position: absolute; left: -1px; top: -1px; z-index: -1;border:1px solid #000;height:50px;width:50px;_height:48px;_width:48px;}
.mainDiv{background:#EBAC3B;width:50px;height:50px;}
浮层B运用了iframe在containDiv中绝对定位并设置z-index: -1;,然后让下面真正放内容的mainDiv可以遮盖住iframe,这个时候iframe是可以遮住select元素的,而间接的使得mainDiv也覆盖了select元素。但是浮层B还是不完美,原因就是这里的浮层B的边框使用的iframe边框,iframe本身可以遮盖select,但是它的边框却不能,所以出现了浮层B的情况。浮层A是解决了这个问题,达到了理想想过,它基本上跟浮层B一样,只是它使iframe比mainDiv上下左右各多出1px,然后再给mainDiv边框,这样浮层的边框是由mainDiv提供的,而整个mainDiv连同边框都在iframe上面,所以达到了理想效果!
select的第二个问题是在IE下动态生成option选项的问题。看上面第二个问题的例子,当点击(限FF)的链接时在FF下可以给select元素加入3个option选项元素,但是在IE下却不行;当点击(通用)的链接时IE和FF下都可以给select元素加入3个option选项元素。原因是第一个链接是通过select元素的innerHTML属性来加入option元素的
document.getElementById("addSelect").innerHTML = "ABC";
这个在FF下没有问题,但是IE下不能通过这个方法来向select元素加入option子元素,而是需要通过第二个链接提供的方法:
document.getElementById("addSelect").options.add(new Option("A","A",false,true));
猜你喜欢
- 看看上一篇《javascript设计模式交流(一)Singleton Pattern》本文将讨论Prototype Pattern的js实现
- 上篇文章讲了js中的一些概念(词法结构) 和 数据类型(部分)。这章我们 继续.然后了解下js中操作数据 和 函数的 作用域。1,对象跟基本
- 今天我们继续向大家介绍一款翻页效果的制作。当鼠标移动到链接上时,翻页的链接区除了有悬停效果,还会放大。这样的效果具有很强烈的效果。大家适当美
- 代码如下:Function splitx(strs1 As String, strs2 A
- 表格制作好了,内容也有了,怎么看着别扭呀!哦,还没有给表格化化装--格式化表格呀,俗话说:人靠衣服也靠鞍,要想让你制作的网页漂漂亮亮、美观大
- monfs :我想知道javascript是否可以实现这样的功能来改变本地的IP地址,例如我本地设置的IP地址是192.168.0.1,我想
- 在MySQL数据库中导出整个数据库:1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldu
- 制作网页可说是易学难精,因此,不断吸收经验可弥补不足,以下列出的50个制作主页的独门招数可帮助你尽快成为高手,哈哈!1、让读者有理由逗留。要
- 技巧 16:如果页面需要很长时间才能完成,那么执行前使用 Response.IsClientConnected 如果用户性急,他们可能会在您
- 这里的等价不是说function的toString相同,也不是说function的引用相同,而是说对于两个function A和B,如果它们
- 面对不断成长的用户,跟随用户的脚步齐步向前,做引起共鸣的改变,去除低龄化的设计,用成熟稳重的心态面对用户。QQBanner自2006 年推出
- 信息图表设计(Inforgraphic Design),是信息设计(Information Design)学科的一个分支,它兴起于20世纪末
- 首先说说框架(Frameworks)这个词,框架就是为我们提供了一个平台一个运行环境,在如此统一的前提下我们做相关开发才能“有章可循”,要充
- 代码如下: 代码如下:///<summary> /// 将两个列不同的DataTable合并成一个新的DataTab
- 技巧之一:提高使用Request集合的效率 访问一个ASP集合来提取一个值是费时的、占用计算资源的过程。因为这个操作包含了一系列对相关集合的
- 50个常用sql语句 Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(
- Array.prototype._ = function(){var _p = 0;var _v = 0;(function(){ 
- 在使用DB2以来,碰到了几次出现提示SQL1032N错误,每次出错时出错信息大概如下:11/21/2004 22:15:33 0 0 SQL
- 作为入门者来说,了解JavaScript中timer的工作方式是很重要的。通常它们的表现行为并不是那么地直观,而这是因为它们都处在一个单一线
- 人们很容易忽视图像img标签的alt属性。然而,它的重要性也无法体现出来,它是有利于网页的accessibility and&nb