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。

希望這是有用的:-)