Facebook Apps: Inhalte werden im IE 7 nicht vollständig geladen

Da ich mich vor ein paar Tagen relativ lange damit herumgeschlagen habe, poste ich hier meinen Lösungsansatz. Das Problem äußerte sich bei einer Facebook App (iFrame) im Internet Explorer 7 beim Laden einer Grafik. Diese wurde nicht vollständig geladen. Der restliche Content unterhalb des nur zum Teil geladenen Bildes war außerdem ebenfalls nicht sichtbar. Die Ursache liegt in der JavaScript-Engine vom IE7:

<div id="fb-root"></div>
<script type="text/javascript">
	window.fbAsyncInit = function() {

		FB.init({
			appId: 'xxx',
			status: true,
			cookie: true,
			xfbml: true
		});

		FB.Canvas.setAutoGrow();

		};
	(function() {
		var e = document.createElement('script'); e.async = true;
		e.src = document.location.protocol + '//connect.facebook.net/de_DE/all.js';
		document.getElementById('fb-root').appendChild(e);
	}());
</script>

Bei mir lag das DIV fb-root und darunterstehendes JavaScript vor dem Hauptcontent der App. Da der IE7 scheinbar Probleme mit Facebook’s JavaScript hat, lädt er im Code dahinter / darunter stehende Elemente nicht vollständig oder gar nicht.

Das Problem konnte ich beheben, indem ich den oben angezeigten Code direkt vor </body> gepackt habe. Um allgemeine JavaScript-Fehler (mit den Facebook Scripten) zu vermeiden, muss außerdem das öffnende HTML-Tag so aussehen:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">