Firefox 中的页脚损坏答案

【问题标题】：footer broken in FirefoxFirefox 中的页脚损坏
【发布时间】：2012-06-01 00:24:41
【问题描述】：

我遇到了一个奇怪的问题，我非常简单的页脚在 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 -->

不错

不好

【问题讨论】：

我们还需要截图什么的...
实际生成的 HTML 也会有所帮助。如果标记无效，浏览器的行为会有所不同。
如果你能把一个简化的例子放到网上@JsFiddle，比截图还要好——很多时候做一个简化的例子已经可以显示问题并帮助你解决它。
谢谢 Andrej，这是小提琴，即使在 FF 中对我来说看起来也不错，但在我的网站上却不行jsfiddle.net/AsYZ2/2

标签： css firefox navigation css-float

【解决方案1】：

（从an edit to the question移动）：

终于弄明白了，伙计们，在我的 CSS 样式表中，它是一个流氓括号，而不是一个花括号，这意味着下面的所有内容都不会被 firefox 或 opera 看到

【讨论】：