Heim > Artikel > Web-Frontend > IE6浏览器下div无法遮盖select下拉框解决方法_html/css_WEB-ITnose
IE6浏览器下div无法遮盖select下拉框解决方法_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:441194Durchsuche
IE6浏览器下div无法遮盖select下拉框解决方法:
在IE6浏览器下，select下拉框无法被div遮盖，其他的主流浏览器都是正常的。这里简单介绍一下如何解决此问题。
默认状态下IE6的表现:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>IE6下无法覆盖select-蚂蚁部落</title><style type="text/css">.mydiv{ width:300px; height:300px; position:absolute; background-color:green; left:50px;}</style></head><body><div class="mydiv"></div><div><select name="myselect"> <option value="1">div+css专区</option> <option value="2">jQuery专区</option></select></div></body></html> 以上代码在IE6浏览器下就会显现出此问题，在其他主流浏览器中是正确显示。
解决方案:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>IE6下无法覆盖select-蚂蚁部落</title><style type="text/css">.mydiv{ width:300px; height:300px; position:absolute; background-color:green; left:50px; z-index:6;}.myframe{ width:300px; height:300px; border:none; position:absolute; left:50px; z-index:5; filter:alpha(opacity=0);}</style></head><body><div class="mydiv"></div><select name="myselect" style="position:absolute;z-index:4"> <option value="1">div+css专区</option> <option value="2">jQuery专区</option></select><!--[if lte IE 6]><iframe class="myframe"></iframe><![endif]--></body></html> 解决方案分析:
虽然div无法覆盖select下拉框，但是iframe能够覆盖select下拉框，而div又可以覆盖iframe，通过三个元素的一些列覆盖关系来实现想要的效果。实现步骤如下:
一.创建一个与div同等尺寸的iframe元素用来覆盖select下拉框。并且通过判断当前浏览器是否为IE6来决定iframe是否生效。
二.让div、select和iframe元素都使用绝对定位，这样他们三个就脱离文档流，可以相互覆盖了。
三.通过使用z-index属性确定三个元素的覆盖关系。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0429/417.html
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：轻量级的HTML/CSS/JS框架：MUI_html/css_WEB-ITnoseNächster Artikel：CSS3:clip-path详解_html/css_WEB-ITnose