0

有人可以解释一下这个奇怪的现象:

http://jsfiddle.net/sPA2V/

由于某种原因,框页脚的高度被认为是 0px(它没有将页脚的内容作为高度考虑),因此边框无法正确显示。如果我浮动页脚或将其设置为固定高度,则可以修复此问题。如果我不能浮动它并且我不能使用固定高度怎么办 - 那我有什么选择?

HTML

<div id="footer">
    <div class="left"> <a href="#">Home</a> <a href="#">Products</a> <a href="#">About</a> <a href="#">Contact</a> </div>        
</div>    

CSS

#footer {
    width:970px;
    margin:0 auto;
    border:1px solid red;
}
#footer .left {
    float:left;
    width:250px;
    margin-top:20px;
}
#footer .left a {
    float: left;
    display: block;
    padding: 0px 0px 0px 7px;
    color: #969696;
    text-decoration: none;
}​

​
4

3 回答 3

4

overflow: hidden;在#footer 上使用。

于 2012-06-23T21:57:38.893 回答
1

#footer 和类名('left')之间不应有任何空格,即应该是#footer.left 和#footer.left a:

您更新的代码在这里:http: //jsfiddle.net/sPA2V/1/

于 2012-06-23T22:09:17.027 回答
1

您必须清除浮动,否则父框(在本例中为 #footer)会崩溃。

<div id="footer">
  <div class="left"> 
    <a href="#">Home</a> 
    <a href="#">Products</a> 
    <a href="#">About</a> 
    <a href="#">Contact</a> 
    <div style="clear:both;"></div><!-- clear floated elements (anchor tags) on this level -->
  </div>
  <div style="clear:both;"></div><!-- clear floated element (div.left) on this level -->        
</div>  
于 2012-06-23T21:54:18.853 回答