Solution to why div cannot cover the select drop-down box in IE6 browser_html/css

Solution to why div cannot cover the select drop-down box in IE6 browser_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:41:44

Original

1253 people have browsed it

The div cannot cover the select drop-down box under the IE6 browser. Solution:
Under the IE6 browser, the select drop-down box cannot be covered by the div. Other mainstream browsers All are normal. Here is a brief introduction on how to solve this problem.
Performance of IE6 in default state:

<!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>

Copy after login

The above code will show this problem in IE6 browser, but it will be displayed correctly in other mainstream browsers.
Solution:

<!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>

Copy after login

Solution analysis:
Although div cannot cover the select drop-down box, iframe can cover the select drop-down box, and div can cover the iframe , to achieve the desired effect through a series of coverage relationships between three elements. The implementation steps are as follows:
1. Create an iframe element of the same size as the div to cover the select drop-down box. And determine whether the iframe is effective by judging whether the current browser is IE6.
2. Let the div, select and iframe elements all use absolute positioning, so that the three of them are out of the document flow and can cover each other.
3. Determine the coverage relationship of the three elements by using the z-index attribute.

The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0429/417.html