文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >奇怪的可见性行为CSS和jQuery

问奇怪的可见性行为CSS和jQuery
EN

Stack Overflow用户
提问于 2010-02-09 05:38:22
回答 4查看 615关注 0票数 0

我有一个固定位置顶部的导航栏。里面是一个邮件列表注册字段。当鼠标悬停在包含的div上时。jQuery slideDown被调用，在先前隐藏的DIV中显示更多的输入字段，然后在鼠标移出时调用SlideUp。问题是，在火狐中，一切都正常，但在IE7中，div的底部(可见)部分(为了在slideDown和slideUp期间保持在底部，它绝对被定位到底部)在初始页面加载时是不可见的。奇怪的是，在悬停在(看似空的) div之后，空内容神秘地出现了，然后即使在SlideUp和鼠标移出完成后仍然可见。有没有什么想法(我对CSS很在行，但现在有点不知所措)？

代码语言：javascript
复制
<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">&nbsp;NYC Shows
        &amp; Events&nbsp;
        <input type="checkbox" name="Checkbox1" value="107">&nbsp;NYC Weekly Classes&nbsp;
        <input type="checkbox" name="Checkbox2" checked="yes" value="109">&nbsp;NYC Area
        Workshops&nbsp;
        <input type="checkbox" name="Checkbox3" value="111">&nbsp;National &amp; Int'l Workshops
        / Events&nbsp;<br />
        <input type="checkbox" name="Checkbox4" checked="yes" value="115">&nbsp;Ranya DVD
        Updates&nbsp;<br />
        <input type="checkbox" name="Checkbox5" value="117">&nbsp;Long Distance Coaching
        Interest&nbsp;
      </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：

代码语言：javascript
复制
#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

代码语言：javascript
复制
//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');
    });
});
internet-explorer-7
jquery
css
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2010-02-10 07:09:21

帕特里克在这里回答了这个问题：Form wrapped in two separate DIV's not displaying in IE7

票数 0
EN

Stack Overflow用户

发布于 2010-02-09 06:46:31

对于初学者来说，您有多个元素具有相同的ID。这是不允许的。ID不能重复使用。如果您有多个，则需要使用class。

代码语言：javascript
复制
id='#top_mailing'
#top_mailing

应该是

代码语言：javascript
复制
class='.top_mailing'
.top_mailing

修复您找到的任何其他重复ids，然后重试。

代码语言：javascript
复制
<div id="top_mailing">
<form method="POST" id="top_mailing" action="xxx">
<input id="top_mailing" 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';}" />
票数 4
EN

Stack Overflow用户

发布于 2010-02-09 06:29:59

可能需要查看您的JQuery和HTML.....但让我在黑暗中猜测一下:尝试在CSS中为绝对定位的div设置一个固定的高度，看看IE7中会发生什么。

编辑：

由于分割(毫无疑问，你有自己的原因)和倾斜的缩进，阅读代码有点困难，但我发现了一个可能的原因：

此元素的高度form#top_mailing与其内部隐藏+显示元素的总数(140px + 30px)不一致。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/2225045

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档