<分区>
<分区>
在今天的新闻中，官方 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; }
最佳答案
问题是您在页脚中以一种非常奇怪的方式定位内容...您指定了很多 top , left , 和 bottom具有 position: relative 的元素的值— 这些元素仍然导致布局就像它们在文档的正常流动中一样(这说明了您看到的巨大底部间隙)，然后它们也被您的定位值所改变。
一个更常见(也更容易)的方法是给你的页脚(或 .group )position:relative然后申请 position: absolute给 child ——这样 child 将相对于 parent 绝对定位。
关于css - Twitter 徽章毁了我的页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6193808/