Что изменилось в Firefox 3.6, чтобы сделать рендеринг <ul>по-другому?

Question

Редактировать (решение найдено)

Спасибо всем за помощь в этом. Проблема заключалась в ошибке в одной из включенных строк CSS (это большой проект с огромным объединенным файлом CSS, поэтому его было трудно обнаружить). Это была проблема строки:

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

Обратите внимание на отсутствующий апостроф. IE6, IE7 и Firefox 3.5, похоже, просто игнорируют эту строку и продолжают работу с остальной частью объединенного файла CSS без проблем. Firefox 3.6 и Google Chrome выдают ошибку в этой строке и отказываются включать остальную часть объединенного файла CSS. Проблема решена !!!

Вот оригинальный неотредактированный вопрос ...

Я разрабатываю веб-приложение для IE6 (к сожалению), но также использую 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 уже:

$('#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 теперь работает так же, как хром.

Answer 1

Мне кажется, что несколько классов или полная таблица стилей не применяются. Можете ли вы с помощью Firebug проверить, действительно ли применяются ваши стили? Возможно, проблема в том, что по какой-либо причине таблица стилей не загружается в FF3.6 / Chrome.

Для всего остального, я думаю, вам нужно показать больше кода или предоставить прямую ссылку.

Answer 2

Вы проверили, есть ли какие-нибудь предупреждения разбора CSS в консоли ошибок?

Answer 3

Firefox 3.6 включает новую версию движка рендеринга Gecko.

Я столкнулся по крайней мере с одной проблемой с немного более старой версией MooTools, когда попробовал бета-версию FF 3.6, поэтому я бы проверил вашу страницу с включенным Jquery и без него, поскольку возможно, что изменения в javascript вызывают проблемы а не сам HTML.

Рендеринг базового макета не должен был так сильно измениться, так что это скорее неясное изменение CSS (например, взаимодействие между необычными элементами) или изменение обработки javascript.

Answer 4

Интересно отметить, что FF 3.6 строже интерпретирует CSS (т. Е. Он ищет этот дополнительный апостоф)