Question

我正在开发一个表单，其中某些字段隐藏并在点击时显示。例如，我有一个名为“联合应用程序？”的输入字段。如果单击“是”，则显示title，forename，surname等字段。如果单击“否”，则隐藏字段。

从功能上来说，这一切都适用于所有浏览器，但是在IE8中，当您单击“否”时，空白区域仍然隐藏在联合申请人字段的下方，因此您必须向下滚动页面才能找到提交按钮。在IE7，IE9，Chrome，FF等中，空白按预期被删除，并且提交按钮向上移动，但IE8似乎不是出于某种原因。

以下是仅使用标题作为示例来保持简短的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>

如果它有帮助我如下：

<!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在

之下

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

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

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

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

如果您需要更多信息，请与我们联系。

由于

Answer 1

尝试元素的.height（）。尝试将高度设置为0.尝试.remove（）。希望这可以指出你正确的方向;到实际的错误。

Jquery隐藏/显示ie8空白问题

1 个答案: