Firefox рендеринг пропал - увидеть что-то действительно странное

Question

У меня следующее действительно странное. В основном, когда я просматриваю источник страницы, все выглядит хорошо, но страница выглядит неправильно. Поэтому я решил взглянуть на источник, используя firebug, и firebug показывает совсем другую историю. Но если я обновлю страницу, страница будет выглядеть нормально, а источник и firebug совпадут.

См. Ниже, что является источником, но что показывает Firefox и Firebug:

Вид источника показывает это:

<div class="mainpanel">  
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Little-Rock"> 
        <div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB001D_0.jpg" alt="Little Rock" /></td></tr></table></div>
        <div class="thumbphototitle">Little Rock</div> 
    </a>  
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"> 
        <div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB002D_0.jpg" alt="Split Rock" /></td></tr></table></div>
        <div class="thumbphototitle">Split Rock</div>
    </a>  
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Rock-Pointer"> 
        <div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB003D_0.jpg" alt="Rock Pointer" /></td></tr></table></div>
        <div class="thumbphototitle">Rock Pointer</div>
    </a>   
</div> 

Но Firebug показывает это, и он отображает на экране, как будто это так:

<div class="mainpanel">  
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Little-Rock"> 
        <div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB001D_0.jpg" alt="Little Rock" /></td></tr></table></div>
        <div class="thumbphototitle">Little Rock</div> 
    </a>  

    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"></a> 
    <div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB002D_0.jpg" alt="Split Rock" /></td></tr></table></div>
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"> </a> 
    <div class="thumbphototitle">
        <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock">Split Rock</a>
    </div> 
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"> </a> 

    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Rock-Pointer"> 
        <div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB003D_0.jpg" alt="Rock Pointer" /></td></tr></table></div>
        <div class="thumbphototitle">Rock Pointer</div>
    </a>   
</div>

Оскорбительный html - это середина тега, который сходит с ума ...

Любые идеи.

Приветствие Anthony

Answer 1

Как говорили другие, это происходит потому, что ваша разметка недействительна. Если пойти еще глубже, проблема в том, что когда анализатор получил <a><div> на своем входе, это может означать две вещи:

1. Вы забыли закрыть тег привязки, в этом случае это должно стать <a></a><div>... в DOM или
2. Якорь оборачивает div, в этом случае DOM должен быть <a><div></div></a>.

Правильное решение может быть принято только тогда, когда известно больше (потенциально гораздо больше) символов; анализ, как вы могли заметить, происходит постепенно - то есть вы можете увидеть части страницы до того, как она будет полностью загружена.

К сожалению, анализатор HTML в Mozilla (начиная с Firefox 3.6 и более ранних версий) в этом случае недетерминирован - итоговый DOM зависит от частей, на которые разбит ваш HTML при работе по сети.

Есть ошибка Mozilla о проблеме, которая очень похожа на вашу.

Я сожалею о вас, и я не знаю, как реализовать (и не имею никакого желания пытаться реализовать;) решение вашей первоначальной проблемы, но, возможно, взломать установку innerHTML (чтобы избежать синтаксического анализа -детерминизм) в порядке?

Кстати, было бы интересно проверить, как алгоритм синтаксического анализа HTML5 говорит, что ваша разметка должна обрабатываться, поскольку именно это в конечном итоге будет реализовано в браузерах.

Answer 2

Это потому, что ваш HTML неверен. Встроенные элементы могут содержать только другие встроенные элементы и не могут содержать блочные элементы.

Браузеры, сталкивающиеся с HTML, который нарушает это правило, могут делать что-либо вообще для анализа страницы (в том числе не отображая страницу), и, по-видимому, интерпретация Firefox что-либо вообще не совпадает как твой.

Обратите внимание, что вы можете преобразовать встроенные элементы, такие как <span>, в элемент блока, установив его свойство display css. Но я не совсем уверен, допустимо ли это для элемента с дополнительной семантикой, такой как тег <a>. Конечно, вы можете преобразовать эти div в встроенные элементы.

Answer 3

Не следует заключать блочные элементы / теги (например, <div>) во встроенные теги (например, <a>). Это напрашивается на неприятности.

Answer 4

Я не хочу прекращать помещать блочные элементы в якоря. Это просто слишком полезно: http://html5doctor.com/block-level-links-in-html-5/

Я разработал обходной путь, который отключает прогрессивный рендеринг и позволяет избежать этой проблемы.

Я использую сниффинг на стороне сервера, чтобы найти «Firefox / 3» в пользовательском агенте. Если найден, я ставлю это сразу после <body>:

<script type="text/javascript">
      // hack for firefox 3.x progressive rendering pessimism
      document.body.style.display = 'none';
</script>

И это прямо перед </body>:

<script type="text/javascript">
      document.body.style.display = 'block';
</script>

В ходе тестирования я обнаружил, что простая вставка пустого тега <script> после тега body позволяет избежать проблемы, с которой я столкнулся. Но это более правильно и безопасно делать шоу / прятки.

Трудно точно сказать, о чем на самом деле думает ФФ - мне любопытно узнать, решает ли это проблему для других.

Я привык делать такие вещи для IE. FF3.x борется за мою новую награду за наименее любимый браузер.