firefox 3.6中改变了< ul>的呈现方式有什么不同？ [英] What changed in firefox 3.6 to make <ul>'s render differently?

问题描述

编辑（解决方案发现）

感谢大家对此的帮助。问题出在一个包含CSS的行之一（这是一个巨大的CSS文件组合的项目，所以很难找到）的错误。这是问题行：

  background：透明url（sf-pager.gif'）repeat-x scroll bottom; 
  

注意缺少撇号。 IE6，IE7和Firefox 3.5似乎只是忽略这一行，并继续其余的组合的CSS文件没有问题。 Firefox 3.6和Google Chrome在这一行上出错，并拒绝包含组合CSS文件的其余部分。问题解决了！

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

我正在开发一个webapp for IE6（不幸），但也使用Firefox和铬侧。我注意到一个奇怪的问题，我的ul列表不能正确呈现在铬。他们在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>顶部标题< / li> 
< li class =navMainLink>顶部标题2的下拉列表
< div class =navpop-wrapperstyle =display：none;> 
< div class =navpop> 
< div class =navpop-header>弹出窗口中的标题< / div> 
< div class =navpop-body> 
< ul> 
< li>项目< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
< / li> 
< / ul> 
  

和一些jquery onready：

<$ p $ （$'code> $（'＃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; 
身高：2.5em; 
 padding-bottom：.4em; 
 width：420px; 
 list-style：none; 
保证金：0; 
} 
 .navpop-wrapper 
 {
 display：block; 
 position：absolute; 
 width：276px; 
 z-index：10000; 
 padding：2px 2px 2px 2px; 
} 
 .navpop 
 {
 background：white; 
保证金：0; 
 display：inline-block; 
宽度：100％; 
 padding-top：6px; 
 padding-bottom：3px; 
} 
 .navpop-header 
 {
 height：19px; 
 margin：4px; 
明确：两者; 
} 
 .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; 
颜色：黑色; 
 cursor：pointer; 
 padding：0; 
 margin-left：24px; 
} 
 #navMain li.navMainLink 
 {
 float：left; 
 border：1px solid＃C8D7E1; 
} 
  

关于从firefox 3.5到3.6的变化有什么想法？很明显，3.6现在和chrome一样。

解决方案

在我看来，像几个类或一个完整的样式表被应用。你可以检查使用萤火虫是否你的风格实际上适用？也许问题是一个样式表在FF3.6 / Chrome中无论如何都不加载。

对于其他所有的东西，我认为你需要展示更多的代码，或者提供直接链接。

Edit (Solution Discovered)

Thanks everyone for your help on this. The problem was an error in one of the lines of CSS that was being included (it's a large project with a huge combined CSS file so it was hard to spot). This was the problem line:

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

Notice the missing apostrophe. IE6, IE7, and Firefox 3.5 seem to just ignore this line and continue with the rest of the combined CSS file no problem. Firefox 3.6 and Google Chrome error out on this line and refuse to include the rest of the combined CSS file. Problem solved!!!

Here's the original unedited question...

I'm developing a webapp for IE6 (unfortunately) but also using firefox and chrome on the side. I've noticed a weird problem where my ul lists are not rendered properly in chrome. They were rendering fine in IE6/IE7 and firefox 3.5, but after upgrading to firefox 3.6 it now looks the same as chrome. Here's what this menu is supposed to look like (IE6/firefox 3.5):

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

And here's what it looks like in Chrome and Firefox 3.6:

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

The code roughly looks like this:

<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>

and some 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();

and here's the 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;
}

Any ideas on what changed from firefox 3.5 to 3.6? Clearly 3.6 is now acting the same as chrome.

解决方案

It looks to me like several classes, or a complete stylesheet, are not being applied. Can you check using Firebug whether your styles actually apply? Maybe the problem is that a stylesheet is not loading in FF3.6/Chrome for whatever reason.

For everything else, I think you need to show more code, or provide a direct link.

这篇关于firefox 3.6中改变了&lt; ul&gt;的呈现方式有什么不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！