Tweet鏈接和Facebook贊和發送按鈕水平在Chrome，Safari和Firefox中，但不在Internet Explorer 8中

下面的代碼迴應了Twitter API推文鏈接和Facebook Like和Send按鈕。它們正常工作。Tweet鏈接和Facebook贊和發送按鈕水平在Chrome，Safari和Firefox中，但不在Internet Explorer 8中

我希望它們在左側的Tweet鏈接和右側的Facebook按鈕水平顯示，並且它們在Chrome，Firefox和Safari中執行。但在Internet Explorer 8中，它們不太水平。訂單仍然相同，但Tweet鏈接被淹沒低於Facebook按鈕的級別。屏幕截圖如下。

鉻：

enter image description here

的Internet Explorer 8：

enter image description here

我如何才能讓他們在IE 8，就像他們在Chrome瀏覽器執行水平出現？

由於提前，

約翰

代碼：

echo "<div class='commenttweet'>"; 

echo "<a href='$url'>Tweet this</a>"; 

echo "</div>"; 


echo "<div class='commenttweet'>"; 

echo " "; 

echo "</div>"; 


echo '<table class="like">'; 
echo '<tr>'; 
echo '<td>'; 

echo '</td>'; 
echo '<td>'; 

echo '<div id="fb-root"></div>'; 
echo "<script> 
    window.fbAsyncInit = function() { 
    FB.init({appId: 'your app id', status: true, cookie: true, 
      xfbml: true}); 
    }; 
    (function() { 
    var e = document.createElement('script'); e.async = true; 
    e.src = document.location.protocol + 
     '//connect.facebook.net/en_US/all.js'; 
    document.getElementById('fb-root').appendChild(e); 
    }()); 
echo '</script>"; 

echo '</td>'; 

echo '</tr>'; 

echo '</table>'; 

echo '<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">'; 

echo '<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font="arial"></fb:like>';

的CSS：

.commenttweet { 
      float: left; 
      margin-left:20px; 
      margin-top:15px; 
      color: #004993; 
      font-family: Georgia, "Times New Roman", Times, serif; 
      font-size: 10px; 
      font-weight: normal; 
      height: 15px; 
      padding-bottom: 2px; 
      padding-left: 5px; 
      padding-right: 5px; 
      padding-top: 2px; 

} 

.commenttweet a{ 
      margin-left:0px; 
      margin-top:15px; 
      color: #004284; 
      width:150px; 
      border:2px solid #004284; 
      font-family:Georgia, "Times New Roman", Times, serif; 
      font-size: 15px; 
      font-weight: normal; 
      height: 15px; 
      padding-bottom: 2px; 
      text-decoration:none; 
      padding-left: 5px; 
      padding-right: 5px; 
      padding-top: 2px; 

} 

.commenttweet a:hover{ 
      margin-left:0px; 
      margin-top:15px; 
      width:150px; 
      background-color: #CAE1FF; 
      color: #004284; 
      border:2px solid #004284; 
      font-family:Georgia, "Times New Roman", Times, serif; 
      font-size: 15px; 
      font-weight: normal; 
      height: 15px; 
      padding-bottom: 2px; 
      text-decoration:none; 
      padding-left: 5px; 
      padding-right: 5px; 
      padding-top: 2px; 

} 

table.like { 
    float: left; 
    margin-top: 5px; 
    margin-left: 250px !important; 
    text-align: left; 
    font-family: Arial, Helvetica, sans-serif; 
    font-weight: normal; 
    font-size: 14px; 
    color: #000000; 
    width: 550px; 
    table-layout: inherit; 
    background-color: #FFFFFF; 
    border: 2px #FFFFFF; 
    border-collapse: collapse; 
    border-spacing: 100px; 
    padding-left: 200px !important; 
    padding-bottom: 0px; 
    text-decoration: none; 
    vertical-align: text-bottom;  

} 

table.like td { 
    border: 0px solid #fff; 
    text-align: left; 
    height: 10px; 
    width:100px; 


}

來源

2011-06-08 John

對於初學者來說，這不是一個好主意，鋪設了你元素與一張桌子。 Div將是最好的。

IE可以對浮游物，填充物等有點松鼠。這就是爲什麼「集中化」屬於一起的元素似乎總是比較清晰的，比如這種情況下它們都屬於同一行。我確信有一個解決這個確切問題的方法，但我不確定是否支付使用表格。

我會親自做一個容器div與兩個左浮動的內部divs包含你想要的。因此，例如：

HTML 
    <div class="container"> 
     <div class="floatleft">tweet button goes here</div> 
     <div class="floatleft">facebook button here</div> 
    </div> 

CSS 
    .floatleft { 
     float: left; 
    }

您可以通過內部div寬度和/或margin/padding來處理間距。

考慮您的tweet鏈接的Jquery UI Button。這將是一個更好看的演示文稿，更像是一個熟悉的UI元素，而不是框中的鏈接。

來源

2011-06-08 22:41:35 bpeterson76

我會繼續說bpeterson在說什麼，你不應該使用表格進行佈局。我還建議使用推特「Tweet Button」，它很容易實現，看起來好多了 - http://dev.twitter.com/pages/tweet_button

至於你的問題，我會想象它是一個用戶代理的CSS問題。所有瀏覽器都使用不同的默認CSS值。你應該總是使用一個很好的重置來確保每個瀏覽器都在同一個點上啓動，這樣你的CSS就可以像預期的那樣工作（或者至少在IE中更像）。

嘗試 -

http://meyerweb.com/eric/tools/css/reset/

或

http://developer.yahoo.com/yui/reset/

來源

2011-06-08 23:02:36

我不喜歡的方式在官方Twitter按鈕看起來。我認爲它與任何網站衝突。 – John 2011-06-08 23:45:20

Tweet鏈接和Facebook贊和發送按鈕水平在Chrome，Safari和Firefox中，但不在Internet Explorer 8中

回答

相關問題