Internet Explorer 8 ändert keine HTML5-Tags im Druck-Stylesheet

8

Ich habe früher an einem Druck-Stylesheet gearbeitet und bin auf ein Problem mit IE8 gestoßen. Ich verwende HTML5 und mehrere Layout-Tags einschließlich Header, Nav und Footer.

Aus irgendeinem Grund in meinem Druck-Stylesheet die Anzeige: keine; Die Deklaration dieser Tags wird im IE8 ignoriert (und ich kann nur von niedrigeren Versionen ausgehen). Ich dachte zuerst, dass Entwickler-Tools in IE9 eine falsche Darstellung verursachen könnte, aber ich habe eine Windows XP-Installation in VirtualBox, die das Problem auch zeigt.

Ich schätze, weil HTML5-Tags von nichts unter IE9 gesehen werden. Das Druck-Stylesheet verbirgt die Layout-Tags in Firefox und Chrome.

Gibt es überhaupt etwas, um das zu umgehen?

Bearbeiten:

Hier ist, was ich gerade habe:

%Vor%

Ignoriere die PHP-Anweisungen, sie sind spezifisch für mein CMS, das WordPress ist.

Dann verstecke ich einfach die Layout-Tags in der print.css:

%Vor%

Dies funktioniert für IE9, Firefox, Chrome aber nicht in etwas niedriger als IE9. Es scheint HTML5-Tags zu ignorieren.

    
James White 27.06.2012, 13:37
quelle

5 Antworten

14

Ich schlage vor, dass Sie html5shiv ausprobieren. Das Haupt-Shiv ist document.createElement() wie du hast, aber es wurde wie verrückt optimiert / minimiert. Noch wichtiger ist, dass es printshiv (IE Print Protector) enthält, mit denen Sie stylen können HTML5-Elemente für den Druck.

    
Jeffery To 11.07.2012, 12:38
quelle
3

Verwenden Sie Modernizr . Stellen Sie im Extra sicher, dass html5shiv / w printshiv ausgewählt ist. Fügen Sie diese Javascript-Bibliothek auf Ihrer Website ein und es sollte wie ein Zauber wirken.

    
MrJinPengyou 10.07.2012 13:29
quelle
0

Da ich nur raten kann, ohne den Code tatsächlich zu sehen, wäre meine erste Vermutung, dass die html5 shiv nach den css-Deklarationen verwendet wird, und die css einfach die html 5-Tags überspringt, ohne die css-Styles anzuwenden Sie. Versuchen Sie, das Skript ganz oben zu setzen, bevor irgendwelche CSS-Link-Tags im Kopf erscheinen.

    
Ace Trajkov 27.06.2012 14:31
quelle
0

Sie könnten einen Workaround mit Javascript versuchen, indem Sie ein Paar Funktionen onbeforeprint und onafterprint einfügen, in denen Sie den Inhalt verstecken / anzeigen, der display:none sein sollte.

    
nEx.Software 27.06.2012 14:33
quelle
0

Ich empfehle dringend die Verwendung von Boilerplate für Ihre Probleme. Ist eine nette Zusammenstellung für Webstandards und einige bekannte und häufige Probleme in fast jedem Browser. Es verwendet modernizr und hat ein tolles Stylesheet mit einem @ media print, das Sie für alle Druckprobleme in allen Browsern verwenden können.

    
wandarkaf 13.07.2012 07:36
quelle

Tags und Links