Question

编辑（已发现解决方案）

感谢大家对此的帮助。问题是包含在CSS中的一行中的错误（这是一个包含巨大组合CSS文件的大型项目，因此很难发现）。这就是问题所在：

background:transparent url(sf-pager.gif') repeat-x scroll bottom;

注意缺少的撇号。 IE6，IE7和Firefox 3.5似乎只是忽略了这一行并继续使用组合CSS文件的其余部分没问题。 Firefox 3.6和谷歌浏览器在此行上出错并拒绝包含组合CSS文件的其余部分。问题解决了!!!

这是原始的未经编辑的问题......

我正在为IE6开发一个webapp（不幸的是），但也使用了firefox和chrome。我注意到一个奇怪的问题，我的ul列表在chrome中没有正确呈现。它们在IE6 / IE7和firefox 3.5中渲染得很好，但在升级到firefox 3.6后，它现在看起来和chrome一样。这是这个菜单应该是什么样的（IE6 / firefox 3.5）：

IE6 http://thebe.jtan.com/~vince/so/ie6.PNG

这就是Chrome和Firefox 3.6中的样子：

Firefox3.6/Chrome http://thebe.jtan.com/~vince/so/firefox.PNG

代码大致如下：

<ul id="navMain">
  <li class="navMainLink">Top header</li>
  <li class="navMainLink">Top header 2 with dropdown
    <div class="navpop-wrapper" style="display:none;">
      <div class="navpop">
        <div class="navpop-header">A header in the popup</div>
        <div class="navpop-body">
          <ul>
            <li>An item</li>
          </ul>
        </div>
      </div>
    </div>
  </li>
</ul>

和一些jquery onready：

$('#navMain li.navMainLink').hover(
    function() { $('div.navpop-wrapper', this).css('display', ''); },
    function() { $('div.navpop-wrapper', this).css('display', 'none'); }
);
$('#navMain .navpop-wrapper').bgiframe();

这是CSS：

#navMain
{
    float: right;
    height: 2.5em;
    padding-bottom: .4em;
    width: 420px;
    list-style: none; 
    margin:0;
}
.navpop-wrapper
{   
    display:block;
    position:absolute;
    width:276px;
    z-index:10000;
    padding: 2px 2px 2px 2px;
}
.navpop
{
    background:white;
    margin:0;
    display:inline-block;
    width:100%;
    padding-top:6px;
    padding-bottom: 3px;
}
.navpop-header
{
    height:19px;
    margin:4px;
    clear:both;
}
.navpop-body
{
    clear:both;
}
.navpop-body div
{
    width:50%;
    float:left;
    display:inline-block;
}
.navpop-body ul 
{
    list-style-type:square;
    margin: 0 6px 3px 0px;
}
.navpop-body ul li
{
    font-size:11px;
    font-weight:bold;
    color:black;
    cursor:pointer;
    padding:0;
    margin-left:24px;
}
#navMain li.navMainLink
{ 
    float: left; 
    border: 1px solid #C8D7E1;
}

有关从Firefox 3.5到3.6的变化的任何想法？显然3.6现在与chrome相同。

Answer 1

在我看来，没有应用几个类或完整的样式表。您能否使用Firebug检查您的风格是否真的适用？也许问题是样式表没有出于任何原因在FF3.6 / Chrome中加载。

对于其他所有内容，我认为您需要显示更多代码，或提供直接链接。

Answer 2

Firefox 3.6包含一个新版本的Gecko渲染引擎。

当我尝试使用FF 3.6的测试版时，我遇到了一个稍微旧版本的MooTools的问题，所以我会检查你的页面有没有涉及Jquery，因为它可能是导致问题的javascript更改而不是HTML本身。

基本布局渲染不应该改变那么多，因此它更可能是一个模糊的CSS更改（例如异常元素之间的交互）或javascript处理更改。

Answer 3

您是否检查过错误控制台中是否有任何CSS解析警告？

Answer 4

有趣的是，FF 3.6在解释CSS方面更为严格（即，它正在寻找那些额外的撇号）

firefox 3.6改变了什么使<ul>的渲染方式不同？</ul>

4 个答案: