【发布时间】：2010-02-08 21:38:21
【问题描述】：
我有一个固定位置顶部的导航栏。里面是一个邮件列表注册字段。当悬停在包含的 div 上时。调用 jQuery slideDown 会在先前隐藏的 DIV 中显示更多输入字段，然后在鼠标移出时调用 SlideUp。问题是一切都在 Firefox 中运行，但在 IE7 中，div 的底部（可见）部分（绝对定位到底部以便在 slideDown 和 slideUp 期间保持在底部）在初始页面加载时不可见。奇怪的是，在悬停（看似空的）div 之后，空内容神秘地出现，然后即使在 SlideUp 和鼠标移出完成后仍然可见。任何人有什么想法（我对 CSS 很擅长，但目前不知所措）？
<div id="top_mailing">
<div id="top_mailing_hidden">
<div id="drop_container">
<form method="POST" id="top_email_form" action="xxx">
<input type="hidden" name="xid" id="xid" value="ccb590470057fda47ff380f48196b203" />
<input type="hidden" name="type" id="type" value="CustomFormWeb" />
<input type="hidden" name="name" id="name" value="Ranya.net Top Page Mailing List" />
<br class="clear" />
<div id="hidden_inputs">
<div class="mailing_input">
First Name*
<input type='text' name='Contact0FirstName' value=''></div>
<div class="mailing_input">
Last Name
<input type='text' name='Contact0LastName' value=''></div>
<div class="mailing_input">
Dance Name
<input type='text' name='Contact0_RealFirstNameorDanceName' value=''></div>
<div class="mailing_input">
City
<input type='text' name='Contact0City' value=''></div>
<div class="mailing_input">
State/Province
<input type='text' name='Contact0State2' value=''></div>
<div class="mailing_input">
Country
<input type='text' name='Contact0Country' value=''></div>
</div>
<div id="checkboxes">
<input type="checkbox" name="Checkbox0" checked="yes" value="105"> NYC Shows
& Events
<input type="checkbox" name="Checkbox1" value="107"> NYC Weekly Classes
<input type="checkbox" name="Checkbox2" checked="yes" value="109"> NYC Area
Workshops
<input type="checkbox" name="Checkbox3" value="111"> National & Int'l Workshops
/ Events <br />
<input type="checkbox" name="Checkbox4" checked="yes" value="115"> Ranya DVD
Updates <br />
<input type="checkbox" name="Checkbox5" value="117"> Long Distance Coaching
Interest
</div>
</div>
</div>
<div id="top_mailing_visible">
<div id="visible_wrap">
<div id="mailing_label">
<span>Mailing List</span></div>
<input id="top_email" type="text" value="Your E-mail Address" name="Contact0Email"
onclick="this.value='';" onfocus="if (this.value == 'Your E-mai Address') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Your E-mail Address';}" />
<input type="submit" name="Submit" class="signup_btn" id="Submit" value="" />
</form>
</div>
</div>
</div>
这是 CSS：
#top_nav div#top_mailing
{
float: right;
width: 351px;
padding: 0 10px 46px 5px;
background: url(images/top_mailing_bg.png) bottom center no-repeat;
position: absolute;
top: 0;
right: 0;
color: #fff;
text-shadow:0 -1px 0px #222;
}
#top_mailing #top_mailing_hidden
{
font-size: .7em;
text-align: center;
position: relative;
height: 140px;
zoom: 1;
padding: 10px 0 0 0;
margin: 0 0 0;
display: none;
}
form#top_email_form
{
width: 350px;
height: 135px;
}
#top_mailing div#checkboxes
{
width: 135px;
float: left;
padding: 7px 0 0 0;
}
#top_mailing div#hidden_inputs
{
width: 205px;
height: 128px;
text-align: left;
float: right;
background: url(images/hidden_inputs_bg.jpg) top left no-repeat;
padding: 3px 4px 3px 6px;
}
#top_mailing div.mailing_input
{
width: 205px;
height: 14px;
display: block;
clear: both;
}
#top_mailing div.mailing_input input
{
float: right;
height: 14px;
}
#top_mailing #top_mailing_hidden span, #top_mailing #top_mailing_hidden input,
{
float: right;
}
#top_mailing #top_mailing_hidden a
{
color: #acffc0;
font-weight: bold;
}
#top_mailing #top_mailing_hidden a:hover
{
text-decoration: none;
}
#top_mailing #top_mailing_visible
{
height: 30px;
font-weight: bold;
font-size: .9em;
padding: 5px 0 10px 5px;
position: absolute;
bottom: 0;
left: 0;
}
#top_mailing input#top_email
{
color: #8c8d8d;
background: url(images/top_mailing_field_bg.jpg) no-repeat;
width: 163px;
height: 28px;
padding: 4px 7px 2px;
border: 0 none;
float: left;
font-size: 1.1em;
font-weight: bold;
text-align: center;
}
#top_mailing div#mailing_label
{
width: 82px;
padding: 5px 0 0 5px;
line-height: 1em;
float: left;
}
#top_mailing form
{
display: block;
width: 350px;
float: right;
}
input.signup_btn
{
background: url(images/signup_btn.png) no-repeat;
width: 83px;
height: 30px;
border: 0 none;
cursor: pointer;
float: left;
margin-left: 3px;
}
input.signup_btn:hover
{
background-position: 0 -31px;
}
这是我的 jQuery
//Top Mailing List Drop down animation
$(document).ready(function () {
if (jQuery.browser.msie === true) {
jQuery('#top_mailing')
.bind(
"mouseenter",
function(){
$("#top_mailing_hidden").stop().slideDown('slow');
}).bind("mouseleave",function(){
$("#top_mailing_hidden").stop().slideUp('slow');
});
}
$('#top_mailing').hoverIntent(
function () {
$("#top_mailing_hidden").stop().slideDown('slow');
},
function () {
$("#top_mailing_hidden").stop().slideUp('slow');
});
});
【问题讨论】：
-
托管在某处的一些代码或问题代码将极大地帮助找到问题而不是模糊的描述。
-
请贴出相关代码。在这种情况下，相关的 CSS、javascript 和 HTML。谢谢。
-
这是你的代码...你要的！！！
-
好的，发现问题了。我已经将
标签： jquery css internet-explorer-7