Пошедший не так, как надо рендеринг Firefox - видит что-то действительно странное

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

Посмотрите ниже для того, что источник всего лишь, какие дисплеи Firefox и поджигателя показывает:

Источник представления показывает это:

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

Но поджигатель показывает это, и это представляет на экране как будто как это:

<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

6
задан Max Shawabkeh 3 February 2010 в 09:58
поделиться

3 ответа

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

, это может означать две вещи:

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

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

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

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

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

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

7
ответ дан 8 December 2019 в 17:21
поделиться

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

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

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

3
ответ дан 8 December 2019 в 17:21
поделиться