来谈谈：select网页下拉列表与div层粉饰成绩

每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习html5viewport的使用能帮你做到这一点……破洛洛文章简介：在html中关于select元素的成绩在良多中央都提出过，而在前段工夫的项目中，恰好碰到了关于select元素的两个小成绩，这里举行一下总结。第一就是对照着名的：一样平常div浮层在IE6下没法粉饰select元素的成绩。起首供应了上面一个实例：注解：假如你在FirFox下和IE7下看都
在html中关于select元素的成绩在良多中央都提出过，而在前段工夫的项目中，恰好碰到了关于select元素的两个小成绩，这里举行一下总结。
相干文章：div层被Flash层粉饰成绩办理思绪
第一就是对照着名的：一样平常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的布局：

1. <divclass="containDiv"><iframeclass="maskIframe"></iframe><divclass="mainDiv">浮层B</div></div>

复制代码

用一个div将实践必要的内容div和一个iframe元素放在一同，它们对应的款式为：

1. .containDiv{position:absolute;top:140px;left:60px;}.maskIframe{position:absolute;left:-1px;top:-1px;z-index:-1;border:1pxsolid#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元素的

1. document.getElementById("addSelect").innerHTML="ABC";

复制代码

这个在FF下没有成绩，可是IE下不克不及经由过程这个办法来向select元素到场option子元素，而是必要经由过程第二个链接供应的办法：

1. document.getElementById("addSelect").options.add(newOption("A","A",false,true));

复制代码

</p>
WHATWG版和W3C版的HTML5规范虽然根源相同，在一些领域却已经产生分歧。