Question

我正在与客户一起解决单个页面上的问题。在所有页面上，页脚内容都已定位并正确显示。但是，在this page上，当在IE7中查看时，页脚内容会向上移动到正文区域。此页面与所有其他页面之间的唯一区别是存在WooFoo联系表单。

我尝试过多种不同的方法来降低内容，但它不会响应填充或边距调整。

这是HTML：

<div id="footer">
<div class="width">
<ul class="footerNav">
  <li><a class="bFB" href="http://www.facebook.com/pages/Charlotte-NC/The-Idea-People/124178504825" target="_blank" title="The Idea People Charlotte web design facebook">FaceBook</a></li>
  <li><a class="bTW" href="http://twitter.com/theideapeople" target="_blank" title="The Idea People Charlotte web design twitter">Twitter</a></li>
  <li><a class="bEM" href="http://feedburner.google.com/fb/a/mailverify?uri=theideapeople" target="_blank" title="The Idea People Charlotte web design email">FeedBurner</a></li>
  <li><a class="bRSS" href="http://feeds.feedburner.com/theideapeople" target="_blank" title="The Idea People Charlotte web design rss">RSS</a></li>
</ul>
<br class="clear" />
<ul class="termNav">
  <li><a href="terms.html">Terms of Use</a> |</li>
  <li><a href="privacy_policy.html">Privacy Policy</a></li>
</ul>
<p class="copyright">&copy;2010 The Idea People. All Rights Reserved.</p>
<p class="company">Charlotte, NC web design, graphic design and internet marketing</p>
<div id="address"> <strong>The Idea People</strong><br />
  4424 Taggart Creek Rd., Suite 111<br />
  Charlotte, NC 28208 </div>
<div id="phone"> <strong>T</strong> 704.398.4437<br />
  <strong>F</strong> 704.398.4438<br />
  <strong>E</strong> <a href="mailto:ideas@theideapeople.com">ideas@theideapeople.com</a> </div>
<br class="clear"/>
</div>
</div>

这是CSS：

#footer      { clear: both; background: url(../images/bg_footer.png) 0 0 no-repeat; padding: 10px 0 76px; color: #ccc; font-size: 14px; font-weight: bold;  }
#footer .width { position: relative; margin: 0 auto; width: 960px; }                                                
.footerNav { width: 300px; height: 30px; font-size: 15px; position: relative; top: 5px; left: 770px; }
.footerNav li   { position:relative; float:left; margin:0; }
.footerNav li a  { color: #fff; display: block; text-decoration: none; font-weight: bold; text-indent: -9999px; }

.footerNav li a.bRSS { background: url(../images/icon-rss.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bFB   { background: url(../images/icon-facebook.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bTW  { background: url(../images/icon-twitter.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bEM  { background: url(../images/icon-email.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }

非常感谢任何解决此问题的帮助！

感谢。

Answer 1

.footerNav元素导致溢出并破坏布局。我甚至在我的机器上，在所有浏览器上都获得了水平滚动条。

以下CSS似乎解决了这个问题：

.footerNav 
{
    /* Add clear and float
    */
    clear:      left;
    float:      right;
    font-size:  15px;
    height:     30px;
    top:        5px;
    /* Delete these 3
    position:   relative;
    left:       770px;
    width:      300px;
    */
}

WooFoo联系表和IE7的页脚内容定位问题

1 个答案: