Twitter 徽章毁了我的页脚

Question

在今天的新闻中，官方 Twitter 小部件 (http://twitter.com/about/resources/widgets) 完全摧毁了我的页脚。我不知道为什么，因为该脚本无法访问我的 style.css

或者可以吗？

我尝试重新排列并重做页脚，但 Twitter 小部件创建的漂亮空白仍然存在。 WTF 正在发生吗？在我所做的所有调整中，唯一有效的似乎是删除整个页脚。很棒的解决方案！

有人可以帮助我吗？

页脚.php：

</div> <!-- End of pagewrap -->

    <footer class="group">
        <div id="logo"></div>
        <div id="twittertitle"><h3>The Director's Production Diary @iampineros</h3>   </div>
        <div id="twitterbox"><div id="winfo"></div></div>

        <div id="sociallist">
            <ul>               
                <li><a href="#"><div id="facebooklogo"><h3>Facebook</h3></div></a></li>
                <li><a href="#"><div id="twitterlogo"><h3>Twitter</h3></div></a></li>
                <li><a href="#"><div id="flickrlogo"><h3>Flickr</h3></div></a></li>
                <li><a href="#"><div id="vimeologo"><h3>Vimeo</h3></div></a></li>
                <li><a href="#"><div id="youtubelogo"><h3>Youtube</h3></div></a></li>
            </ul>                                
        </div>
            <div id="disclaimer">All material published in this website is property of Filmliga unless stated otherwise. Please, don’t mess with us, thank you. Copyright 2011 FIlmliga/Benjamin Piñeros. All rights reserved. This site is powored by Wordpress.</div>

</footer>            

<?php wp_footer(); ?>


</body>

</html>

样式.css：

#page-wrap { width:1020px; margin: 0px 0px 0px 0px; padding: 0px 0px 20px 0px; background: white; }

footer { width: 1020px; height: 300px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: #1e1e1e; }

#logo { width: 221px; height: 222px;position:relative; bottom: -20px; left: 20px; padding: 0px 0px 0px 0px; background-image:url(images/logo.png); background-repeat:no-repeat;  }

#twittertitle { position:relative; bottom: 208px; left: 270px; padding: 0px 0px 0px 0px; }

#twitterbox { position:relative; top: -203px; left: 270px; padding: 0px 0px 0px 0px; background-image:url(images/twitterbox.png); background-repeat:no-repeat; width: 540px; height: 190px; }

#winfo { position:relative; top: 0px; left: 0px; padding: 0px 0px 0px 0px; background:none; width: 500px; height: 180px; }

#sociallist { position:relative; bottom: 393px; left: 837px; padding: 0px 0px 0px 0px; background-color:#282828; width: 140px; height: 190px; }

#sociallist ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type:none; list-style-image:none; }

#sociallist li { margin: 0px 0px 0px 0px; text-decoration: none; padding: 0px 0px 0px 0px; }

#sociallist li h3:hover {color: #1ad4ff; }

#facebooklogo { background-position: center; background-image: url(images/facebooklogo.png); background-repeat:no-repeat; width: 26px; height: 26px; position:relative; top: 10px; left: 103px; }

#facebooklogo h3 { position:relative; bottom: 3px; right: 90px; }

#twitterlogo { background-position: center; background-image: url(images/twitterlogo.png); background-repeat:no-repeat; width: 33px; height: 25px; position:relative; top: 20px; left: 98px; }

#twitterlogo h3 { position:relative; bottom: 3px; right: 85px; }

#flickrlogo { background-position: center; background-image: url(images/flickrlogo.png); background-repeat:no-repeat; width: 26px; height: 26px; position:relative; top: 30px; left: 103px; }

#flickrlogo h3 { position:relative; bottom: 2px; right: 90px; }

#vimeologo { background-position: center; background-image: url(images/vimeologo.png); background-repeat:no-repeat; width: 27px; height: 24px; position:relative; top: 40px; left: 101px; }

#vimeologo h3 { position:relative; bottom: 2px; right: 87px; }

#youtubelogo { background-position: center; background-image: url(images/youtubelogo.png); background-repeat:no-repeat; width: 24px; height: 29px; position:relative; top: 50px; left: 104px; }

#youtubelogo h3 { position:relative; bottom: 2px; right: 90px; }

#disclaimer { position: relative; bottom: 0px; left: 0px; margin: 0px auto; padding: 0px 0px 0px 17px; text-align: left; font-size: 10px; word-spacing: 3px; }

Answer 1

问题是您在页脚内以一种非常奇怪的方式定位内容...您指定了很多 top、left 和 bottom<具有 position:relative 的元素上的 /code> 值 - 这些元素仍然会导致内容的布局就好像它们处于文档的正常流程中一样（这就是您看到的巨大底部间隙的原因） ，然后它们也会根据您的定位值发生变化。

一种更常见（也更简单）的方法是为页脚（或 .group）指定 position:relative，然后应用 position:absolute 到子级——这样子级将相对于父级绝对定位。

Answer 2

问题出在你的布局上。您对绝对/相对定位的广泛使用会扰乱后续的 div 放置。考虑重做您的布局。

不过，这里有一个快速修复方法：
适用于#disclaimer：

margin-top: -330px;