Get the App
SLTechnology News&Howtos  ›  Development  › 

How to solve the problem that DIV can't cover select under IE6

Shulou Source: shulou.com Published: 2022-06-02 13:57:34 10月03日 Update

In this issue, the editor will bring you about how to solve the problem that DIV can not cover select under IE6. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Do you know that DIV floats cannot cover select tags under IE6? let's discuss it here. In fact, I encountered the problem about select elements a long time ago, but why DIV under IE7 and FF can cover select tags will reveal the secret for you.

JavaScript skillfully solves the problem of IE6 IE7 IE8 compatibility

This time, let's discuss a question about the select element. In fact, I encountered the problem about the select element a long time ago, and this time I was asked the same question again, that is, the general DIV floating layer cannot cover the selectaspxhome.com/search.asp?keyword=%b1%ea%c7%a9 "target=_blank > tag under IE6, while DIV under IE7 and FF can cover the select tag.

Give a simple example to illustrate the problem:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> untitled document title > # warp {position:absolute; top:10px; left:26px; width:200px; height:200px;} .box {position:absolute; top:0; left:0; width:200px; height:200px; background:#FDF3D9; border:1px solid # EEAC53} style > head > dfsagdsaDIV > DIV > Test option option > Test option 2option > Test option 3option > select > label > form > body > html >

[hint: you can modify part of the code first, and then press run]

DIV cannot mask select under IE6, because under IE6, browsers treat select elements as window-level elements, and DIV or other ordinary elements cannot hide select elements no matter how high the z-index setting.

There are two solutions online:

◆ when the floating layer DIV appears, the select is hidden with JS, and the select reappears when the floating layer DIV disappears. This method is often used in the early stage, and it is not introduced here.

◆ uses the same level element of select: the iframe tag, and then puts it together with the actual floating layer DIV and iframe. Indirectly make DIV obscure select.

The correct code:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> untitled document title > # warp {position:absolute; top:10px; left:26px; width:200px; height:200px;} .box {position:absolute; top:0; left:0; width:200px; height:200px; background:#FDF3D9; border:1px solid # EEAC53} .box iframe {width:400px; height:400px Z-index:-1} style > head > iframe > dfsagdsaDIV > DIV > Test options option > Test options 2option > Test options 3option > select > label > form > body > html >

[hint: you can modify part of the code first, and then press run]

The above is how to solve the problem that DIV cannot cover select under IE6. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Tags: Elements questions tests tags code floats long ago content that is documents times titles parts can be first analyzed prompted run ordinary professional small and medium Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Linux macOS Docker MariaDB Huawei