Print preview im IE und HTML5

HTML5 kennt ja einige neue Tags. Nun sind die leider nicht mit IE kompatibel. Mal wieder. Aber dies ist ein anderes Thema.

Nun könnte man ja denken, dass man mit einem print CSS alles so hinbiegen kann wie man möchte. Ne. Pustekuchen.

Leider kann der IE die neuen Elemente auch nicht richtig mit CSS versehen. Wie und was genau liegt im dunkeln.

Der Weg an diesem "Problem" vorbei liegt darin, dass man einfach diese Tags mit "normalen" Tags ersetzt.

Hier ist mal ein sehr einfacher Ansatz mit Hilfe von jQuery;

window.onbeforeprint = printFix;
function printFix() {
    $("footer").replaceWith(function () {
      var attClass = $(this).attr('class');
      var attId = $(this).attr('id');
      var attStyle = $(this).attr('style');
      var add = '';
		
      if(attClass) { add = 'class="'+attClass+'"' };
      if(attId) { add = add+' id="'+attId+'"' };
      if(attStyle) { add = add+' style="'+attStyle+'"' };
		
      return "
" + $(this).html() + "
";
  });
}

Je nach CSS Angaben kann es natürlich sein, dass diese Methode nicht funktioniert. Es sollte auch darauf geachtet werden, dass aus ‹footer› ein ‹div› wird. Daher sollte man für solche Tags ohne Attribute eines für das print CSS einbauen.
Würde dann so aussehen:

Wird dann zu:

Mit dieser Methode sollte man die Druckansicht der einzelnen Browser in den Griff zu bekommen.
Wer es besonders speziell will, der sollte ein Druck Layout durch einen Drucken Knopf auf der Website anbieten.