Html IE7中的绝对定位元件错误
我遇到了一个问题，一个绝对定位的div隐藏在一个浮动div后面。我已经在堆栈上读了很多关于这个问题的答案，但是我尝试过的都不起作用，所以我将把源代码放在这里。我不知道我错过了什么 如果您单击“浏览”文本，我会让jquery打开一些选项的菜单。这些选项位于绝对定位的div中，在ie7模式下，您将在其下方的div内容后面看到它们。我在IE7模式+IE7标准中使用IE9来获得这个结果Html IE7中的绝对定位元件错误,html,css,internet-explorer,css-position,Html,Css,Internet Explorer,Css Position,我遇到了一个问题，一个绝对定位的div隐藏在一个浮动div后面。我已经在堆栈上读了很多关于这个问题的答案，但是我尝试过的都不起作用，所以我将把源代码放在这里。我不知道我错过了什么 如果您单击“浏览”文本，我会让jquery打开一些选项的菜单。这些选项位于绝对定位的div中，在ie7模式下，您将在其下方的div内容后面看到它们。我在IE7模式+IE7标准中使用IE9来获得这个结果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona
<!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" lang="en-us">
<head>
<title>IE7 Absolutely Positioned Element Issue</title>
<style type="text/css">
* { font-family: Tahoma; font-size: 8pt; padding: 0; margin: 0; border: 0 none; }
div.section { width: 400px; margin: 0 auto; border: 1px solid #444444; margin-top: 5px; }
div.toggleBrowseMenu { cursor: pointer; padding-left: 5px; position: relative; }
div.browseMenu { border: 1px solid #E2E2E2; position: absolute; width: auto; height: auto; left: -3px; top: 19px; padding: 0px; background-color: #FFFFFF; display: none; text-align: left; z-index: 10; }
div.browseMenu ul { list-style-type: none; }
div.browseMenu li { background-color: transparent; padding: 3px 7px; margin: 0px; white-space: nowrap; }
div.browseMenu li:hover { text-decoration: underline; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
<div class="section" style="position: realtive;">
<div style="float: left; padding-left: 100px;">
Left Content
</div>
<div class="toggleBrowseMenu" style="float: right; padding-right: 100px;">
Browse
<div class="browseMenu">
<ul>
<a href="http://www.google.com/"><li>Google</li></a>
<a href="http://www.yahoo.com/"><li>Yahoo</li></a>
<a href="http://www.bing.com/"><li>Bing</li></a>
</ul>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div class="section">
<div style="position: relative;">
<div style="float: left; width: 40%; padding: 5%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at augue at
tellus tristique porta. Nulla rhoncus tincidunt turpis, eu mattis dui
scelerisque in. Vivamus lectus velit, consectetur at pellentesque dignissim,
faucibus id lacus. Aliquam ut eros at erat convallis tincidunt id vel velit.
Pellentesque commodo, nulla sed malesuada convallis, ipsum nulla viverra lorem,
et mattis sapien nibh nec magna. Donec a nibh ligula. Suspendisse at convallis
libero. Phasellus cursus nibh at mi aliquet venenatis. Donec non tortor vitae
sapien facilisis imperdiet. Proin molestie tempor dapibus. Suspendisse potenti.
Nulla facilisi. Suspendisse risus est, faucibus sit amet laoreet in, cursus ut
augue. Cras mollis venenatis est, nec vehicula massa pellentesque et.
</div>
<div style="float: left; Peach; width: 40%; padding: 5%;">
Fusce adipiscing odio quis massa placerat euismod. In eu eros orci. Aenean
mollis luctus velit ac sollicitudin. Cras elit erat, semper quis fringilla ac,
placerat sed justo. Duis sed tellus risus, fermentum pellentesque nunc.
Phasellus mollis tempus eros, posuere dictum augue gravida at. Praesent
sollicitudin justo ac purus iaculis auctor. Suspendisse potenti. Praesent
vehicula fermentum sem in ullamcorper. Donec pharetra ante vitae urna pharetra
dignissim. Suspendisse tincidunt felis elementum lorem imperdiet ullamcorper.
In malesuada, arcu a porta tincidunt, nisl elit pulvinar lacus, in dictum velit
odio eget risus. Integer cursus dapibus tortor ut congue. Nunc mattis mollis
justo. Aliquam quis tellus tellus, eu sagittis tellus. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
<div style="clear: both;"></div>
</div>
</div>
<script type="text/javascript">
// Toggle the browse menu.
$('.toggleBrowseMenu').click(function ()
{
$(this).find('.browseMenu').toggle();
});
// Hide the browse menu when the mouse leaves the tag.
$('.browseMenu').mouseleave(function ()
{
$(this).hide();
});
</script>
</body>
</html>
IE7绝对定位元素问题
*{字体系列：Tahoma；字体大小：8pt；填充：0；边距：0；边框：0无；}
div.section{width:400px；margin:0 auto；border:1px solid#444444；margin top:5px；}
div.togglebrowsemanu{cursor:pointer；padding left:5px；position:relative；}
div.browsemeu{边框：1px实心#e2e2；位置：绝对；宽度：自动；高度：自动；左：-3px；顶部：19px；填充：0px；背景色：FFFFFF；显示：无；文本对齐：左；z索引：10；}
div.browsemeu ul{列表样式类型：无；}
div.browsemeu li{背景色：透明；填充：3px 7px；边距：0px；空白：nowrap；}
div.browsemeu li:悬停{文本装饰：下划线；}
左内容
浏览
Lorem ipsum dolor sit amet，是一位杰出的献身者。奥古斯的奎斯克
泰勒斯·特里斯蒂克·波特。turpis，欧盟马蒂斯酒后驾车
权杖。维莱特斯·维利特（Vivamus lectus velit），佩伦茨克显贵教堂的圣座，
faucibus id lacus。我的爱在我的心灵深处。
Pellentesque commodo，nulla sed malesuada convallis，ipsum nulla viverra lorem，
他是一位智者。不要吃一口舌苔。康瓦利斯酒店
自由人。在维尼纳蒂斯的阿利奎特。Donec非侵权人生命
智人便利饮食。暂时性脑出血。潜力悬钩子。
无便利。Suspendisse risus est，faucibus坐在amet laoreet，cursus ut
奥古斯。威尼斯东部滨海区，nec马萨佩伦茨克等地的交通工具。
这是一个很好的例子。在欧洲，厄洛斯·奥奇。埃尼安
莫利斯·卢库斯·维利特（mollis luctus velit ac sollicitudin）。克拉斯·埃拉特，森佩尔·奎斯·弗林利亚，ac，
普莱斯特拉特·塞德·胡斯托。这是一种发酵剂。
这句话的意思是：母亲怀孕的时候。普拉森特
苏利西汀是一种很好的药物。潜力悬钩子。普拉森特
ullamcorper中的车辆发酵菌sem。Donec pharetra ante Vita urna pharetra
显贵。猫科植物悬钩子。
在《马莱苏阿达》中，是一个门，在《韦利特格言》中是一个耳垂的耳垂
奥迪奥·埃吉特·里苏斯。整型玉米饼。努克·马蒂斯·莫利斯
胡斯托。阿利奎姆·奎斯·泰勒斯，欧盟矢状体。类aptent taciti
根据康努比亚·诺斯特拉，根据希梅纳奥斯的继承人，社会责任。
//切换浏览菜单。
$（'.toggleBrowseMenu'）。单击（函数（）
{
$（this.find（'.browseMenu'）.toggle（）；
});
//当鼠标离开标记时隐藏浏览菜单。
$（'.browseMenu'）.mouseleave（函数（）
{
$（this.hide（）；
});
z-indexrelative<!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" lang="en-us">
<head>
<title>IE7 Absolutely Positioned Element Issue</title>
<style type="text/css">
* { font-family: Tahoma; font-size: 8pt; padding: 0; margin: 0; border: 0 none; z-index:1;}
/* z-index to 1 for everything*/
div.section { width: 400px; margin: 0 auto; border: 1px solid #444444; margin-top: 5px; }
div.toggleBrowseMenu { cursor: pointer; padding-left: 5px; position: relative;}
div.browseMenu { border: 1px solid #E2E2E2; position: absolute; width: auto; height: auto; left: -3px; top: 19px; padding: 0px; background-color: #FFFFFF; display: none; text-align: left; z-index: 10; }
/*set z-index to 10 here! */
div.browseMenu ul { list-style-type: none; }
div.browseMenu li { background-color: green; padding: 3px 7px; margin: 0px; white-space: nowrap; }
div.browseMenu li:hover { text-decoration: underline; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
<div class="section"> <!-- you didn't this to be relatively positioned -->
<div style="float: left; padding-left: 100px;">
Left Content
</div>
<div class="toggleBrowseMenu" style="float: right; padding-right: 100px;">
Browse
<div class="browseMenu">
<ul>
<a href="http://www.google.com/"><li>Google</li></a>
<a href="http://www.yahoo.com/"><li>Yahoo</li></a>
<a href="http://www.bing.com/"><li>Bing</li></a>
</ul>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div class="section"><!-- removed wrapping div with relative positioning here-->
<div style="float: left; width: 40%; padding: 5%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at augue at
tellus tristique porta. Nulla rhoncus tincidunt turpis, eu mattis dui
scelerisque in. Vivamus lectus velit, consectetur at pellentesque dignissim,
faucibus id lacus. Aliquam ut eros at erat convallis tincidunt id vel velit.
Pellentesque commodo, nulla sed malesuada convallis, ipsum nulla viverra lorem,
et mattis sapien nibh nec magna. Donec a nibh ligula. Suspendisse at convallis
libero. Phasellus cursus nibh at mi aliquet venenatis. Donec non tortor vitae
sapien facilisis imperdiet. Proin molestie tempor dapibus. Suspendisse potenti.
Nulla facilisi. Suspendisse risus est, faucibus sit amet laoreet in, cursus ut
augue. Cras mollis venenatis est, nec vehicula massa pellentesque et.
</div>
<div style="background-color:red; float: left; width: 40%; padding: 5%;">
Fusce adipiscing odio quis massa placerat euismod. In eu eros orci. Aenean
mollis luctus velit ac sollicitudin. Cras elit erat, semper quis fringilla ac,
placerat sed justo. Duis sed tellus risus, fermentum pellentesque nunc.
Phasellus mollis tempus eros, posuere dictum augue gravida at. Praesent
sollicitudin justo ac purus iaculis auctor. Suspendisse potenti. Praesent
vehicula fermentum sem in ullamcorper. Donec pharetra ante vitae urna pharetra
dignissim. Suspendisse tincidunt felis elementum lorem imperdiet ullamcorper.
In malesuada, arcu a porta tincidunt, nisl elit pulvinar lacus, in dictum velit
odio eget risus. Integer cursus dapibus tortor ut congue. Nunc mattis mollis
justo. Aliquam quis tellus tellus, eu sagittis tellus. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
<div style="clear: both;"></div>
</div>
<script type="text/javascript">
// Toggle the browse menu.
$('.toggleBrowseMenu').click(function ()
{
$('.browseMenu').toggle();
});
// Hide the browse menu when the mouse leaves the tag.
$('.browseMenu').mouseleave(function ()
{
$(this).hide();
});
</script>
</body>
</html>
IE7绝对定位元素问题
*{字体系列：Tahoma；字体大小：8pt；填充：0；边距：0；边框：0无；z索引：1；}
/*z索引为1表示所有内容*/
div.section{width:400px；margin:0 auto；border:1px solid#444444；margin top:5px；}
div.togglebrowsemanu{cursor:pointer；padding left:5px；position:relative；}
div.browsemeu{边框：1px实心#e2e2；位置：绝对；宽度：自动；高度：自动；左：-3px；顶部：19px；填充：0px；背景色：FFFFFF；显示：无；文本对齐：左；z索引：10；}
/*在这里将z-index设置为10*/
div.browsemeu ul{列表样式类型：无；}
div.browsemeu li{背景色：绿色；填充：3px 7px；边距：0px；空白：nowrap；}
div.browsemeu li:悬停{文本装饰：下划线；}
左内容
浏览
Lorem ipsum dolor sit amet，是一位杰出的献身者。奥古斯的奎斯克
泰勒斯·特里斯蒂克·波特。turpis，欧盟马蒂斯酒后驾车
权杖。维莱特斯·维利特（Vivamus lectus velit），佩伦茨克显贵教堂的圣座，
faucibus id lacus。爱欲的Aliquam ut eros