jQuery隐藏/显示ie8空格问题

Question

I'm developing a form where some fields hide and show on click. 我正在开发一种表单，其中某些字段在单击时隐藏并显示。 Eg I have an input field called 'Joint Application?' 例如，我有一个名为“联合申请？”的输入字段。 and if 'Yes' is clicked then title, forename, surname etc fields are displayed. 如果单击“是”，则显示标题，姓氏，姓氏等字段。 If 'No' is clicked then the fields are hidden. 如果单击“否”，则这些字段将被隐藏。

Functionally this all works fine in all browsers, however in IE8 when you click 'NO' the white space remains underneath where the joint applicant fields have been hidden, therefore you have to scroll down the page to find the submit button. 从功能上讲，这在所有浏览器中都可以正常工作，但是在IE8中，当您单击“否”时，空格隐藏在联合申请者字段已被隐藏的下方，因此您必须向下滚动页面以找到“提交”按钮。 In IE7, IE9, Chrome, FF etc the whitespace is removed as expected and the submit button moves back up but IE8 doesn't seem to for some reason. 在IE7，IE9，Chrome，FF等中，空格已按预期删除，并且提交按钮又向上移动，但IE8似乎由于某种原因而没有。

Below is the html just using the title as an example to keep this short: 以下是仅以标题为例的html格式：

<div class="form-row clearfix">
    <label for="jointApp"><span class="required">*</span>Joint application</label>
    <span class="form-icon"></span>
    <div class="form-fields validate-radio">
        <span class="radiolabel">Yes<input type="radio" id="jointApp" class="cdq-jointApp-check jointApp" name="jointApp" value="1" ></span>
        <span class="radiolabel">No<input type="radio" id="singleApp" class="cdq-jointApp-check jointApp" name="jointApp" value="0" ></span>
    </div>
          <span class="tooltip_container">
                    <a href="#" class="tooltip">
                        <img src="/assets/images/tooltip.jpg" alt="joint application information">
                            <span>
                                <img class="callout" src="/assets/images/callout.gif" alt="callout" />
                                Do you wish to add a second person to your application?
                            </span>
                    </a>
                </span>
    <br /><br />
</div>

<div class="clearfix"></div>

<div id="jointDetails" style="display:none;">

<p class="jointappheader jointDetails" style="display:none">Please enter the joint applicants details below</p>

<div class="jointDetails form-row clearfix" style="display:none">
    <label for="joint_title"><span class="required">*</span>Title</label>
    <span class="form-icon"></span>
    <div class="form-fields joint validate-select">
        <select name="joint_title" id="joint_title" class="cdq-joint-title-text validate-select field-select">
            <option selected="selected" value="">Please select...</option>
            <option value="Mr" >Mr</option>
            <option value="Mrs" >Mrs</option>
            <option value="Ms" >Ms</option>
            <option value="Miss" >Miss</option>
        </select>
    </div>
</div>
</div>

If it helps my is as follows: 如果有帮助，我如下所示：

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>
<!-- CSS concatenated and minified-->
    <link rel="stylesheet" href="/assets/css/reset.css">
    <link rel="stylesheet" href="/assets/css/styles.css">
    <link rel="stylesheet" href="/assets/fancybox/source/jquery.fancybox.css?v=2.1.1" type="text/css" media="screen" />
    <!-- end CSS-->

    <script src="/assets/js/libs/modernizr-2.0.6.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/assets/fancybox/source/jquery.fancybox.pack.js?v=2.1.1"></script>
    <script src="/assets/js/script.js" type="text/javascript"></script>
    <script src="/assets/js/slider.js" type="text/javascript"></script>
</head>

Javascript is below Javascript在下面

$('#singleApp').click(function(){

    $('#jointDetails').hide('slow');
    $('.jointDetails').hide('slow');
})

$('#jointApp').click(function(){

    $('#jointDetails').show('slow');
    $('.jointDetails').show('slow');
})

Let me know if you need any more information. 让我知道您是否需要更多信息。

Thanks 谢谢

Answer 1

Try the .height() of the element. 尝试元素的.height（）。 Try setting height to 0. Try to .remove(). 尝试将height设置为0。尝试.remove（）。 Hopefully this could point you in the right direction; 希望这可以为您指明正确的方向； to the actual bug. 到实际的错误。

jQuery隐藏/显示ie8空格问题

问题描述

1 个解决方案

解决方案1
1 2012-10-13 09:08:48

jQuery隐藏/显示ie8空格问题

问题描述

1 个解决方案

解决方案1 1 2012-10-13 09:08:48

解决方案1
1 2012-10-13 09:08:48