Home >Web Front-end >HTML Tutorial >IE6 select penetration problem (div positioning cannot cover select)!_html/css_WEB-ITnose
IE6 select penetration problem (div positioning cannot cover select)!_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:54:021284browse
I have heard about this problem for a long time, but I have never encountered it personally, so I have not paid too much attention to these problems.
This time I finally saw the power of IE. Although the IE version in the IE options is clearly written as IE11, some parts do use the IE6 kernel. No wonder Microsoft is updating various windows every day. .
The way to solve this problem is very simple. Add an iframe behind the content you need to display, and let it block the selection and not penetrate it. In this way, the world will be clean.
The following html:
<body> <div> <select> <option value="">select穿透问题</option> <option value="">select穿透问题</option> </select> </div> <div class="wrap" style="position:relative;width:200px;height:200px;"> <div class="content">需要显示的内容</div> <iframe class="ie-select-iframe" style="position:absolute;top:0;left:0;z-index:-1;width:200px;" scrolling="no" frameborder="0"></iframe> </div></body>
What needs to be noted here is:
1 wrap is just a container, so border and the like Style, it is best not to put it here, because this div will be penetrated by select.
2 It is best to give a value to the width of the iframe. Under ie6, you need to use 100%. It seems that you need to make some other settings. You need to give height: 100% to both html and body to achieve this. Otherwise it will be invalid under ie6.