Firefox Rendering WRONG gegangen - sehen etwas wirklich seltsam

Question

Ich habe das folgende ist wirklich seltsam. Wenn ich den Quellcode der Seite ansehe, sieht alles gut aus, aber die Seite sieht völlig falsch aus. Also habe ich beschlossen, einen Blick auf den Quellcode mit Firebug und Firebug zeigt eine ganz andere Geschichte zu nehmen. Aber wenn ich die Seite aktualisiere, sieht die Seite gut aus und der Quelltext und Firebug stimmen überein.

Siehe unten, was die Quelle ist, sondern was Firefox zeigt und Firebug zeigt:

Die Quelle zeigt dies an:

<div class="mainpanel">  
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="stackoverflow.com/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="stackoverflow.com/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="stackoverflow.com/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> 

Aber Firebug zeigt dies und es rendert auf dem Bildschirm, als ob es so ist:

<div class="mainpanel">  
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="stackoverflow.com/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="stackoverflow.com/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="stackoverflow.com/Photograph/Narooma/Split-Rock"> </a> 
    <div class="thumbphototitle">
        <a class="thumbphoto" onclick="window.location=this.href;return false;" href="stackoverflow.com/Photograph/Narooma/Split-Rock">Split Rock</a>
    </div> 
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="stackoverflow.com/Photograph/Narooma/Split-Rock"> </a> 

    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="stackoverflow.com/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>

Das beanstandete HTML ist der mittlere a-Tag, der verrückt spielt...

Irgendwelche Ideen.

Prost Anthony

Answer 1

Wie schon gesagt, geschieht dies, weil Ihr Markup ungültig ist. Wenn man etwas tiefer geht, besteht das Problem darin, dass der Parser beim Empfang von <a><div> in seiner Eingabe, kann dies zwei Dinge bedeuten:

1. Sie haben vergessen, den Anker-Tag zu schließen. In diesem Fall sollte dies zu <a></a><div>... im DOM, oder
2. Der Anker umschließt das div, in diesem Fall sollte das DOM <a><div></div></a> .

Die richtige Entscheidung kann erst dann getroffen werden, wenn mehr (möglicherweise sehr viel mehr) Zeichen bekannt sind; das Parsing erfolgt, wie Sie vielleicht bemerkt haben, schrittweise, d. h. Sie können Teile der Seite sehen, bevor sie vollständig heruntergeladen ist.

Leider ist der HTML-Parser von Mozilla (ab Firefox 3.6 und früher) in diesem Fall nicht deterministisch - das resultierende DOM hängt von den Teilen ab, in die Ihr HTML aufgespalten wird, während es über das Netzwerk geht.

Es gibt ein Mozilla-Fehler über ein Problem, das dem Ihren sehr ähnlich ist.

Es tut mir leid für Sie, und ich weiß nicht, wie ich die Lösung für Ihr ursprüngliches Problem implementieren kann (und habe auch keine Lust zu versuchen, sie zu implementieren ;), aber vielleicht gibt es einen Hack, der die Einstellung innerHTML (um Parser-Nichtdeterminismus zu vermeiden) in Ordnung ist?

Übrigens wäre es interessant zu prüfen, wie der HTML5-Parsing-Algorithmus Ihr Markup behandeln soll, da dies schließlich in den Browsern implementiert werden wird.

Answer 2

Sie sollten keine Blockelemente/Tags (wie <div> ) in Inline-Tags (wie <a> ). Das kann nur Ärger geben.

Answer 3

Das liegt daran, dass Ihr HTML-Code ungültig ist. Inline-Elemente können nur andere Inline-Elemente enthalten und keine Blockelemente.

Browsern, die auf HTML stoßen, das gegen diese Regel verstößt, ist es erlaubt, alles Mögliche zu tun, um die Seite zu analysieren (einschließlich der Nichtanzeige der Seite), und anscheinend ist die Interpretation von Firefox von irgendetwas ist nicht dasselbe wie das Ihre.

Beachten Sie, dass Sie Inline-Elemente wie <span> zu einem Blockelement durch Setzen der display css-Eigenschaft. Ich bin mir aber nicht ganz sicher, ob das für ein Element mit zusätzlicher Semantik wie z. B. ein <a> Tag. Natürlich können Sie diese Divs in Inline-Elemente umwandeln.

Answer 4

Ich möchte nicht aufhören, Blockelemente in Ankern zu platzieren. Es ist einfach zu nützlich: http://html5doctor.com/block-level-links-in-html-5/

Ich habe einen Workaround entwickelt, der das progressive Rendering zu deaktivieren scheint und dieses Problem vermeidet.

Ich verwende serverseitiges Sniffing, um nach "Firefox/3" im User-Agent zu suchen. Falls gefunden, füge ich dies direkt nach <body> :

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

Und dies kurz vor </body> :

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

Beim Testen stellte ich fest, dass das einfache Einfügen eines leeren <script> Tag nach dem Body-Tag das Problem, das bei mir auftrat, vermieden. Aber es fühlt sich korrekter und sicherer an, ein Ein- und Ausblenden zu machen.

Es ist schwer, mit Sicherheit zu sagen, was FF wirklich denkt - ich bin neugierig, ob dies das Problem für andere löst.

Ich bin es gewohnt, solche Dinge für den IE zu tun. FF3.x konkurriert mit meinem neuen unbeliebtesten Browser.