Facebook Like按鈕轉移整個頁面居中顯示在div

我想中心我的facebook像按鈕。它在一個div內，根據點擊的菜單項顯示/隱藏。當我點擊顯示div（並且隱藏其他人）的li（新聞和更新）時，點擊後我的整個頁面會移動。奇怪的是，當我在鍍鉻中「檢查元素」時，它不會移位。您應該能夠從窗口複製和粘貼代碼並查看html（頂部橫幅不會加載）。Facebook Like按鈕轉移整個頁面居中顯示在div

任何明顯的CSS錯誤？在此先感謝

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Chef's Classic - Knock OUT 'Bout</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <style type="text/css"> 
div { 
    display: block; 
} 
.tabs { 
    text-align:center; 
} 
.tabs ul { 
    display: inline-block; 
    margin: 0px; 
    padding: 0px 0px 10px 0px; 
    /* For IE, the outcast */ 
    zoom:1; 
    *display: inline; 
} 
.tabs li { 
    list-style:none; 
    display:inline-block; 
    text-align:center; 
} 
.tabs a { 
    padding:5px 10px; 
    display:inline-block; 
    background-color:#000000; 
    color:#FFFFFF; 
    text-decoration:none; 
    width:150px; 
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
    -webkit-border-radius: 10px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */ 
    -moz-border-radius: 10px; /* FF1-3.6 */ 
    border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ 
} 

.tabs a:hover { 
    background-color:#D7181E; 
} 

.tabs a.active { 
    padding:5px 10px; 
    display:inline-block; 
    background-color:#666666; 
    color:#FFFFFF; 
    text-decoration:none; 
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
} 

</style> </head> 
    <body style=" background-color:#666666"> 
    <div id="fb-root"></div> 

    <div style="display:block; width: 800px; margin:0px auto; background-color:#FFFFFF; border-width: 50px 50px 50px 50px; -moz-border-image: url(images/main-border-oil-grey.png) 71 repeat; -webkit-border-image: url(images/main-border-oil-grey.png) 71 repeat; -o-border-image: url(images/main-border-oil-grey.png) 71 repeat; border-image: url(images/main-border-oil-grey.png) 71 repeat;"> 
     <!--banner--> 
     <div style="text-align:center;"> 
     <img height="250" src="images/banner.jpg" alt="Chef's Classic Knock Out Bout" /> 
     </div> 
     <!--links--> 
     <div class="tabs" style="text-align:center"> 
     <ul> 
      <li> <a href="#pages-about">About</a> </li> 
      <li> <a href="#pages-facebook">News &amp; Updates</a> </li> 
      <li> <a href="#pages-tickets">Tickets</a> </li> 
     </ul> 
     </div> 
     <!--pages--> 
     <div id="pages-about" style="min-height:400px;"> 

     </div> 
     <div id="pages-facebook" style="min-height:400px;"> 

     <div class="fb-like-box" data-href="http://www.facebook.com/pages/Chefs-Classic-Knock-OUT-Bout/225835004169328" 

      data-width="550" data-height="600" data-show-faces="false" data-border-color="#D7181E" 

      data-stream="true" data-header="true"> </div> 
     <!--<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FChefs-Classic-Knock-OUT-Bout%2F225835004169328&amp;width=550&amp;height=427&amp;colorscheme=light&amp;show_faces=false&amp;border_color=%23D7181E&amp;stream=true&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:550px; height:427px;" allowTransparency="true"> 
     </iframe>--> </div> 
     <div id="pages-tickets" style="min-height:400px;"> 
     </div> 
    </div> 
    </body> 
    <script type="text/javascript">(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 
</script> <script type="text/javascript"> 
// Wait until the DOM has loaded before querying the document 
$(document).ready(function(){ 
    $('.tabs ul').each(function(){ 
     // For each set of tabs, we want to keep track of 
     // which tab is active and it's associated content 
     var $active, $content, $links = $(this).find('a'); 

     // Use the first link as the initial active tab 
     $active = $links.first().addClass('active'); 
     $content = $($active.attr('href')); 

     // Hide the remaining content 
     $links.not(':first').each(function() { 
      $($(this).attr('href')).hide(); //assumes href contains div name 
     }); 

     // Bind the click event handler 
     $(this).on('click', 'a', function(e){ 
      // Make the old tab inactive. 
      $active.removeClass('active'); 
      $content.hide(); 


      // Update the variables with the new link and content 
      $active = $(this); 
      $content = $($(this).attr('href')); 

      // Make the tab active. 
      $active.addClass('active'); 
      $content.show(); 

      // Prevent the anchor's default click action 
      e.preventDefault(); 
     }); 
    }); 
}); 
    </script> 
</html>

來源

2012-02-13 NickG

我注意到的一件事是'.tabs ul'行'* display：inline;'。看起來你在事故中添加了一個星號（*）。 – 2012-02-13 20:34:23

好趕上，不幸的是不是我正在尋找的哈哈:)，仍然是時髦的猴子和輪班。 – NickG 2012-02-13 23:03:57

我認爲這是Windows滾動條顯示和隱藏。一旦你有所有的標籤內容，這不應該是一個問題。

來源

2012-02-13 20:55:43 nodrog

我實際上在所有標籤中都有東西，我只是刪除了所有標籤中的所有內容，以便將代碼放下以顯示Facebook正在影響它。 – NickG 2012-02-13 22:59:18

啊，我看到你在說什麼，好吧，所以基本上添加'足夠'的數據將使它始終在那裏，或設置最大高度或頁腳。 – NickG 2012-02-13 23:07:09

是的，它的煩人，它的一個領域IE工作得很好，滾動條是積極或不活躍，但總是在那裏。這是一個意見的問題，但由於大多數頁面需要滾動，所以它一直都在那裏。我經常有客戶抱怨跳躍，並且診斷它很難，因爲人們擁有不同尺寸的瀏覽器，並且很難解釋:-) – nodrog 2012-02-13 23:18:00

Facebook Like按鈕轉移整個頁面居中顯示在div

回答

相關問題