包装在两个独立DIV中的表单不会在IE7中显示

Question

我有一个包装在两个独立div中的表单，以便在鼠标悬停触发jQuery slideUP动画之前隐藏表单的上半部分，从而显示第二个div。尽管有点像黑客，但它可以在除IE7以外的所有主流浏览器中工作。有没有一种方法可以使表单的下半部分在IE7中显示在#top_mailing_visible中。它可以在所有其他浏览器中显示。

我的源代码很大，但如果你喜欢，这里就是：

<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：

#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');
    });
});

Answer 1

Brian，你可能会看到你的表单被包装在两个不同的div中，但实际上标签最终是不匹配的。

为什么不能通过将表单作为最外面的一组标记来包装整个表单呢？

剥离你的HTML，这就是你所拥有的，这并不好。

表单以div结尾，div以表单结尾

<div id="top_mailing">
  <div id="top_mailing_hidden">
    <div id="drop_container">
      <form method="POST" id="top_email_form" action="xxx">

      </div>
    </div>
    <div id="top_mailing_visible">
      <div id="visible_wrap">
        <div id="mailing_label">
        </div>
      </form>
    </div>
  </div>
</div>

你为什么不这样做：

<form>
<div id="top_mailing">
  ...
</div>
</form>