在Firefox中打破頁腳

我面臨一個奇怪的問題，我的非常簡單的頁腳在Firefox中顯示不正確。這基本上是一個顯示內嵌導航左側浮動和標籤右側浮動。似乎在其他瀏覽器中都能正常工作。下面是代碼：在Firefox中打破頁腳

HTML

<div id="footer_wrap"> 
<div id="footer_area"> 

<ul id="footer_nav"> 

    <li><a href="{site_url}" {if segment_1 == "" OR segment_1 == "view"}class="active"{/if}>Blog</a></li> 
    <li><a href="{path="/archives"}" {if segment_1 == "archives"}class="active"{/if}>Archives</a></li> 
    <li><a href="{path="about"}" {if segment_1 == "about"}class="active"{/if}>About</a></li> 

</ul> 


    <a href="{site_url}" id="footer_logo">&copy; {current_time format="%Y"} {site_name}</a> 

<div class="clear"></div> 

</div> <!-- end footer area --> 
</div> <!-- end footer wrap -->

CSS

#footer_nav {float: left; list-style: none;} 
#footer_nav li {display: inline; margin-right: 20px;} 
#footer_nav li a { 
    font-weight: bold; 
    color: #FFFFFF; 
    opacity: 0.8; 
    filter: alpha(opacity=80); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; 
    text-transform: uppercase; 
    font-size: 12px; 
} 
#footer_nav li a:hover { 
    font-weight: bold; 
    opacity: 1; 
    filter: alpha(opacity=100); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; 
} 
#footer_nav li a.active { 
    font-weight: bold; 
    opacity: 1; 
    filter: alpha(opacity=100); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; 
} 

#footer_logo { 
    float: right; 
    color: #FFFFFF; 
    font-size: 18px; 
    opacity: 0.8; 
    filter: alpha(opacity=80); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; 
    -webkit-transition: all 0.1s ease-in-out; 
    -moz-transition: all 0.1s ease-in-out; 
    -o-transition: all 0.1s ease-in-out; 
} 
#footer_logo:hover { 
    opacity: 1; 
    filter: alpha(opacity=100); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; 
}

這裏是簡化的代碼中，只有兩個驗證錯誤是空的「高度」值上的圖像

<div id="footer_wrap"> 
<div id="footer_area"> 

<ul id="footer_nav"> 

    <li><a href="#">Blog</a></li> 
    <li><a href="#">Archives</a></li> 
    <li><a href="#">About</a></li> 

</ul> 


    <a href="#" id="footer_logo">&copy; 2011 Mysitename</a> 

<div class="clear"></div> 

</div> <!-- end footer area --> 
</div> <!-- end footer wrap -->

好

Chrome - Good