zoukankan      html  css  js  c++  java
  • IE6下著名的zindex bug

    abcc项目实现这样一个功能:点击“上载查询”,弹出一个绝对定位的div(类似qq文件中转站的“上传文件”按钮),里面有上传按钮等,点击后div在最上层。即z-index为最大。在firefox下表现良好,在IE6下无论如何也盖不住select。墨墨说是IE下一个著名的bug,解决方法用一个iframe包住select。

    以下是一个测试的静态html,为bug重现及及解决方法。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    	<style type="text/css">		
    		#d1,#d2 {
    				400px;
    			height : 400px;
    		}
    		#d1 {		
    			position : absolute;
    			top : 100px;
    			background : red;
    			z-index : 1;
    		}
    		#d2 {
    			position : absolute;
    			top : 150px;
    			background : blue;
    			z-index : 2;
    		}
    	</style>
    </head>
    <body>	
    	<div id="d1">	
    		<form>			
    			<input type="text" name="username"/>
    		</form>
    		<p>中國</p>
    		<form>
    			<iframe style="z-index:1"><!-- 用iframe 解决此bug -->	
    			<select name="country">				
    				<option value="1">china</option>
    				<option value="2">japanese</option>
    				<option value="1">U.S.A</option>
    			</select>
    			</iframe>
    		</form>
    	</div>	
    	<div id="d2">ddd</div>
    </body>
    </html>
    
  • 相关阅读:
    627. Swap Salary
    176. Second Highest Salary
    596. Classes More Than 5 Students
    183. Customers Who Never Order
    181. Employees Earning More Than Their Managers
    182. Duplicate Emails
    175. Combine Two Tables
    620. Not Boring Movies
    595. Big Countries
    HDU 6034 Balala Power! (贪心+坑题)
  • 原文地址:https://www.cnblogs.com/snandy/p/1969191.html
Copyright © 2011-2022 走看看