2013-10-29 21 views
0

,我的網頁是thetotempole.ca。我的社交媒體div欄位於網站的最頂端,它爲Google加上了一個插件,而在IE9中,它只顯示加號的一半。我想知道如何將其移動到div中,以便顯示整個插件。這是我的HTML:如何在IE9中的div盒中移動+1谷歌插件

<!doctype html> 
    <head> 
     <title>The Totem Pole News</title> 
     <meta name="description" content=" A totem pole themed news website posting articles on music, movies, video games, mobile applications, and news."> 
     <link href="thecss.css" rel="stylesheet" type="text/css"> 
     <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 
     <script> 
      ! function(d, s, id) { 
       var js, fjs = d.getElementsByTagName(s)[0], 
        p = /^http:/.test(d.location) ? 'http' : 'https'; 
       if (!d.getElementById(id)) { 
        js = d.createElement(s); 
        js.id = id; 
        js.src = p + '://platform.twitter.com/widgets.js'; 
        fjs.parentNode.insertBefore(js, fjs); 
       } 
      }(document, 'script', 'twitter-wjs'); 
     </script> 
    </head> 
    <body> 
     <div id="fb-root"></div> 
     <script> 
      (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 = "//connect.facebook.net/en_GB/all.js#xfbml=1"; 
       fjs.parentNode.insertBefore(js, fjs); 
      }(document, 'script', 'facebook-jssdk')); 
     </script> 
     <div id="socialmediaplugins"> 
      <div id="facebook"> 
       <div class="fb-like" data-href="http://www.thetotempole.ca" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div> 
      </div> 
      <div id="twitter"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> 
      </div> 
      <g:plusone></g:plusone> 
     </div> 
     <div id="container"> 
      <div id="contentbox" align="Center"> 
       <div id="banner" align="Center"></div> 
       <div id="navbar"> 
        <a href="#">Home</a> 

        <a href="#">Link 1</a> 

        <a href="#">Link 2</a> 

        <a href="#">Link 3</a> 

        <a href="#">Link 3</a> 

       </div> 
       <div id="navbar2"> 
        <a href="#">Home</a> 

        <a href="#">Link 1</a> 

        <a href="#">Link 2</a> 

        <a href="#">Link 3</a> 

        <a href="#">Link 3</a> 

       </div> 
       <!-- This is the end of the contentbox --> 
      </div> 
      <!-- This is the end of the container div --> 
     </div> 
    </body> 

    </html> 

這裏是我的CSS:

body { 
    margin-bottom: 0px; 
    background-color: #333; 
} 
#container { 
    width: 1100px; 
    height: 1000px; 
    position: relative; 
    margin-right: auto; 
    margin-left: auto; 
    z-index: 1; 
} 
#facebook { 
    position: fixed; 
    right: 100px; 
    z-index: 15; 
} 
#twitter { 
    position: fixed; 
    z-index: 16; 
    right: 120px; 
} 
#google { 
    position: fixed; 
    top: 7px; 
    right: 140px; 
} 
#socialmediaplugins { 
    text-align: right; 
    position: fixed; 
background: rgb(125,126,125); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#f7f7f7',GradientType=0); /* IE6-9 */ 
    margin: 0px; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    z-index: 14; 
} 
#contentbox { 
    background-color: #999; 
    width: 1100px; 
    height: 1000px; 
} 
#banner { 
    background-image: url(images/totempolebanner.gif); 
    position: absolute; 
    top: 25px; 
    width: 960px; 
    height: 150px; 
    left: 70px; 
} 
#navbar { 
    float: left; 
    position: absolute; 
    top: 175px; 
    left: 70px; 

} 
#navbar2 { 
    position: absolute; 
    top: 175px; 
    left: 815px; 
} 

謝謝!

回答

1

您應該嘗試強制使用IE8兼容性設置進行渲染,因爲這與Google+更加兼容。下面加入meta標籤在你<head>塊發信號給IE瀏覽器,它應該呈現使用IE8標準:

<meta http-equiv="X-UA-Compatible" content="IE=8" /> 

還有另外一個相關的問題在這裏: