IE6、IE7下的z-index问题_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

IE6、IE7下的z-index问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:43 AM

IE6 IE7 z-index 浏览器兼容

有html结构如下：

<div class="wrap">		<div class="fl-wrap">			left		</div>		<div class="fr-wrap">			<ul>				<li>					<div class="fl">						<div class="pmt-wrap">							<a class="pmt">								鼠标经过时，显示div							</a>							<div class="pmt-detail">								...							</div>						</div>					</div>					<div class="fr">						right					</div>					<div class="clear"></div>				</li>				<li>					<div class="fl">						<div class="pmt-wrap">							<a class="pmt">								鼠标经过时，显示div							</a>							<div class="pmt-detail hidden">								...							</div>						</div>					</div>					<div class="fr">						right					</div>					<div class="clear"></div>				</li>			</ul>		</div>		<div class="clear"></div>	</div>

回复讨论(解决方案)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>上传图片</title><style type="text/css">	.wrap{		border:1px solid red;		height:300px;		padding:10px;		width:500px;	}	.fl-wrap{		border:1px solid green;		float:left;		height:100px;		width:50px;	}	.fr-wrap{		border:1px dashed blue;		float:right;		height:300px;		width:440px;	}	ul{		margin:0;		padding:0;	}	.fr-wrap li{		border:1px solid #000;		height:100px;		list-style-type:none;		margin:5px;		padding:5px;			}	.clear{		clear:both;		height:0;		overflow:hidden;	}	.fr-wrap .fl{		border:1px dashed red;		float:left;		height:100%;		width:140px;	}	.fr-wrap .fr{		border:1px dashed blue;		float:right;		height:100%;		width:260px;	}	.fl .pmt-wrap{		position:relative;	}	.fl .pmt{		cursor:pointer;		font-size:12px;		margin:5px;		padding:0;	}	.fl .pmt-detail{		background-color:#fff;		border:1px solid #ccc;		height:200px;		left:5px;		position:absolute;		top:16px;		width:100px;		z-index:3;		display:none;	}	.hidden{		display:none;	}</style><script type="text/javascript">//原生JS写法，，代码比较多，，如果引用JQ库，那就简单多了window.onload=function(){	var oParent = document.getElementById('frWrap');	var oPmt = getByClassName(oParent,'pmt');	//alert(oPmt.length);	var pmtDetail = getByClassName(oParent,'pmt-detail');	for(var i= 0; i<oPmt.length; i++){		oPmt[i].index = i;		oPmt[i].onmouseover=function(){			//alert(0);			//alert(this.index);			pmtDetail[this.index].style.display='block';			this.parentNode.style.zIndex='1';  //关键。。给当前父层添加 z-index		}		oPmt[i].onmouseout=function(){			this.parentNode.style.zIndex='';			pmtDetail[this.index].style.display='none';		}	}	}// 通过class获取元素function getByClassName(oParent,sClass){	var arrReslut = [];	var oEle = oParent.getElementsByTagName('*');	for(var i = 0; i<oEle.length; i++){		if(oEle[i].className==sClass){			arrReslut.push(oEle[i]);		}	}	return arrReslut;}</script></head><body><h2 id="IE-下-需要给父层添加z-index才行-但如果在css加-因为是class-所以后面的也一起添加了-因此需要用JS动态添加到当前的父级-反正你也要实现显示隐藏效果-刚好可以这样实现">IE6下，需要给父层添加z-index才行，但如果在css加，因为是class，所以后面的也一起添加了。因此需要用JS动态添加到当前的父级，反正你也要实现显示隐藏效果，刚好可以这样实现</h2><div class="wrap">		<div class="fl-wrap">			left		</div>		<div class="fr-wrap" id="frWrap">			<ul>				<li>					<div class="fl">						<div class="pmt-wrap">							<a class="pmt">								鼠标经过时，显示div							</a>							<div class="pmt-detail">								...							</div>						</div>					</div>					<div class="fr">						right					</div>					<div class="clear"></div>				</li>				<li>					<div class="fl">						<div class="pmt-wrap">							<a class="pmt">								鼠标经过时，显示div							</a>							<div class="pmt-detail">								...							</div>						</div>					</div>					<div class="fr">						right					</div>					<div class="clear"></div>				</li>			</ul>		</div>		<div class="clear"></div>	</div></body></html>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML文档中的根标签是什么？Apr 29, 2025 am 12:10 AM

theroottaginanhtmldocumentis.servesasthetop-levellementThateNcapsulatesAllotherContent，确保properdocumentstrumentstrumentsureandbrowserparserparsing。

HTML标签和元素是同一件事吗？Apr 28, 2025 pm 05:44 PM

文章解释说，HTML标签是用于定义元素的语法标记，而元素是完整的单位，包括标签和内容。他们一起工作以构建网页。查拉克计数：159

＆lt; head＆gt;的意义是什么。＆＆lt;身体＆gt;在html中标记？Apr 28, 2025 pm 05:43 PM

本文讨论了Lt; Head＆gt; ＆＆lt;身体＆gt; HTML中的标签，它们对用户体验的影响以及SEO的影响。正确的结构增强了网站功能和搜索引擎优化。

＆lt; strong＆gt;，lt; b＆gt;有什么区别标签和lt; em＆gt;，＆lt; i＆gt;标签？Apr 28, 2025 pm 05:42 PM

本文讨论了HTML标签，和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。

请说明如何指示HTML中文档使用的字符集？Apr 28, 2025 pm 05:41 PM

文章讨论了在HTML中指定字符，重点介绍了UTF-8。主要问题：确保正确显示文本，防止乱七八糟的字符，并增强SEO和可访问性。

HTML中的各种格式标签是什么？Apr 28, 2025 pm 05:39 PM

本文讨论了用于构建和造型Web内容的各种HTML格式标签，强调了它们对文本外观的影响以及语义标签对可访问性和SEO的重要性。

HTML元素的' ID”属性与'类”属性之间有什么区别？Apr 28, 2025 pm 05:39 PM

本文讨论了HTML的“ ID”和“类”属性之间的差异，重点是它们的独特性，目的，CSS语法和特异性。它解释了它们的使用如何影响网页样式和功能，并为

HTML中的'类”属性是什么？Apr 28, 2025 pm 05:37 PM

本文解释了HTML“类”属性在分组样式和JavaScript操纵元素中的作用，将其与唯一的“ ID”属性进行对比。

See all articles

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

SublimeText3 Linux新版

SublimeText3 Linux最新版

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。