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

Question

我正在构建一个网站，并有一个框中的内容区域来显示公司服务。在我的导航栏中，我有一个名为“联系人”的按钮。点击联系人后，内容区域将被隐藏，并显示联系人分区。这适用于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()和show()方法“同时设置匹配元素的宽度，高度和不透明度”，以便高度和宽度发生变化，浏览器重新流动文档。浏览器的重新流动方式非常不同，在IE中，这使得盒子跳跃起来。您可能想要使用自定义jQuery animate() - 也许只是高度？正在减少的宽度导致浮动元素重新流动。

选择“取消”链接后的布局损坏是由jQuery在动画后<div class="boxes">上留下style造成的。这会导致框div无法正确清除左侧的段落，因此宽度更小，因此无法在一行上放置3个子元素。您可以删除这些多余的样式jQuery的叶挂接到最终show（）方法回调，像这样：

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

刚也指出，它可能没有帮助，IE会在quirks mode运行。您的网页没有符合我的经验的文档类型可能会导致意外和意外的呈现问题（特别是在IE中）。除了缺少文档类型，还有一些其他小问题会导致您致电not validate。

希望这是有用的:-)