0

嗨，我在thetotempole.ca有我的网页。我在网站顶部的社交媒体 div 栏有一个 Google 加一插件，在 IE9 中它只显示加一的一半。我想知道如何将它移到 div 中，以便显示整个插件。这是我的 HTML：

<!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;
}

谢谢！！

4

1 回答 1

1

您应该尝试使用 IE8 兼容性设置强制页面呈现，因为这与 Google+ 更兼容。将以下内容添加到块中的元标记<head>以向 IE 发出信号，表明它应该使用 IE8 标准呈现：

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

这里还有另一个相关的问题：

于 2013-10-29T20:23:47.897 回答