IE jQuery 显示/隐藏 div 跳转问题

Question

我正在建立一个网站，并有一个内容区域，其中包含用于显示公司服务的框。在我的导航栏中有一个名为“联系”的按钮。单击“联系人”后，内容区域将隐藏并显示联系人 div。这在 Chrome 和 FF 中有效，但在 IE 中却很混乱。下面是一些代码。

联系区域的 HTML 代码：

<div class="contact"> 
                    <h2>Contact Us</h2> 
                    <p>For emergencies or to arrange a quote, call <span style="font-weight:bold; color:red;">999</span>. Or use the form below and we'll get back to you shortly.</p> 
                    <form class="tab"> 
                    <label for="move">Your Name:</label> 
                    <input type="text" name="move"  class="move" /><br /> 
                    <label for="locate">Your Email:</label> 
                    <input type="text" name="locate" class="locate" /><br /> >  
                    <label for="contact">&nbsp;</label> 
                    <a href='#contact' class='contact-submit'>Send!</a><a href="#" class="prepend-1 contact-close">Cancel</a><br /> 
                    </form> 
                </div>

内容区域的 HTML 代码：

<div class="content"> 
                <div class="span-24 last"> 
                <p></p> 
                </div> 
                <div class="span-6 append-1"> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra malesuada orci et lacinia. Ut ac augue diam. Fusce vitae felis velit, vitae vulputate libero. Pellentesque in nibh est, tincidunt ullamcorper dolor. Etiam condimentum semper sem a mollis. Cras faucibus, neque vitae egestas imperdiet, tellus lorem rutrum massa, eget ultrices libero purus quis mi. Aliquam erat volutpat. Donec non metus id sapien pulvinar consequat. Praesent ut lectus massa, id viverra orci. In hac habitasse platea dictumst.</p> 
                </div> <!-- END span-6 DIV --> 
                <div class="span-15 append-2 last prepend-bottom box2" style="overflow:hidden;"> 
                    <p>Cras viverra placerat luctus. Cras eu elit sit amet lectus pretium egestas id a est. Mauris pretium lacus non eros dapibus at tempus leo condimentum. Quisque a elit non massa mattis pretium vitae eu est. Curabitur vulputate iaculis tellus tincidunt bibendum. Aliquam erat volutpat. Aenean nec viverra augue. Duis ultrices velit sed sapien suscipit eget dictum dolor feugiat. Aliquam erat volutpat. Nulla cursus dolor ut turpis congue sollicitudin. In hac habitasse platea dictumst. Duis facilisis malesuada magna, sed porttitor tortor posuere sed.</p> 
                </div> <!-- END span-6 DIV --> 

                <div class="prepend-3 boxes prepend-top"> 

                    <div class="clearfix row"> 

                        <div class="module compact clearfix"> 
                          <h4><a href="electrical/">Electrical</a></h4> 
                          <div class="compact-content"> 

                            <img src="assets/images/electrical-image1.jpg" alt="" > 

                            <p>We also offer electrical installations and maintenance for both commercial and domestic.</p> 

                          </div> <!-- END compact-content DIV --> 
                        </div> <!-- END module DIV --> 
                        <div class="module compact clearfix"> 
                          <h4><a href="plumbing/">Plumbing</a></h4> 
                          <div class="compact-content"> 

                            <img src="assets/images/plumbing-image1.jpg" alt="Property Maintenance and Refurbishment" > 

                            <p>We offer plumbing for the commercial industry, no matter if it's big or a small job.<br /></p> 

                          </div> <!-- END compact-content DIV --> 
                        </div> <!-- END module DIV --> 

                        <div class="module compact clearfix"> 
                          <h4><a href="security/">Security</a></h4> 
                          <div class="compact-content"> 

                            <img src="assets/images/security-image1.jpg" alt="Security" > 

                            <p>Security is key, that's why we are experts in the security field.</p> 

                          </div> <!-- END compact-content DIV --> 
                        </div> <!-- END module DIV --> 
                    </div><!-- END clearfix row --> 
                </div><!-- END prepend-3 DIV --> 
            </div><!-- END content DIV --> 

jQuery 代码：

$('a.contact-close').click(function(){//If cancel has been clicked, show original content.

    $('div.contact').hide('slow', function(){


            $('div.content').show('slow', function(){
                $('div.boxes').show('slow').delay(700);
            });//END div.content show-slow

        });
    });

        //Below is the contact script
        $('div.contact').hide();//Hide div

        $('div.nav a.contact').click(function(){//If Contact has been clicked show Contact div
            $('div.boxes').hide('slow', function(){
                $('div.content').hide('slow', function(){
                    $('div.contact').show('slow');

                });
            });//END Boxes hide
        });

其 CSS 位于 jsFiddle 上： http://jsfiddle.net/hart1994/Nh9tP/

在 Internet Explorer 中，它会跳过框隐藏过程。然后，当重新显示时，它们会错位成两排而不是三排。请参阅下面的网站链接以获取完整演示。

您可能需要重建它，因为它可能不会显示在 jsFiddle 中。

或者你可以看一下： http://molossi.psm2.co.uk/

我已经尝试将 jQuery 更改为 SlideDown/向上和淡出/淡入。

提前致谢！

Answer 1

jquery hide（） and show（） 方法“同时将匹配元素的宽度，高度和不透明度启用，例如高度和高度和高度宽度更改，浏览器正在重新流程文档。浏览器的重流方式非常不同，在 IE 中，这会导致框跳跃。您可能想使用自定义 jQuery animate() - 也许只是高度？宽度的减小导致浮动元素重新流动。

选择“取消”链接后的断开布局是由style在style div; div class =“ boxes”＆gt; 后引起的。这导致 boxes div 无法正确清除左侧的段落，因此宽度较小，因此无法在一行上容纳 3 个子元素。您可以通过挂钩到最终 show() 方法上的回调来删除 jQuery 留下的这些额外样式，如下所示：

$('div.boxes').show('slow', function() {
    $(this).attr('style', '');
}).delay(700);    

还要注意，IE 在 不验证。

希望这有用:-)