Ich erstelle einige druckspezifische Stile mit dem folgenden:
%Vor% Da wir SASS verwenden, werden alle Styles in ein Stylesheet, styles.css zur Laufzeit, kompiliert, das wie folgt in <head> des Dokuments deklariert wird:
Wenn ich jetzt aus Chrome drucke (Strg + P), ignoriert es vollständig meine Druckstile, aber Firefox (30.0) ist in Ordnung. IE (11) ist schrecklich, aber das liegt daran, dass wir viele Anzeigen / Verstecke haben, die der IE nicht zu mögen scheint (
) Kann nicht für das Leben von mir herausfinden, was passiert ist. Wenn ich Druckmedien in Chrome emulieren möchte, werden die Stile geladen. Wenn ich versuche, etwas zu drucken, funktioniert das nicht. Ich habe viele Dinge probiert, indem ich media= -Attribute, doppelte Anführungszeichen hinzugefügt habe und die Reihenfolge von href etc geändert habe, ohne Erfolg !!
Beachten Sie, dass wir type nicht mehr verwenden, da ich dachte, dass Sie das nicht mehr verwenden müssen. Ich habe versucht, dies trotzdem hinzuzufügen, aber es funktioniert immer noch nicht!
Ich habe es sogar versucht: Ссылка , aber es funktioniert immer noch nicht. Es macht mich verrückt, irgendwelche Ideen?
UPDATE: Also habe ich festgestellt, dass, wenn ich Ctrl + P drücke, um die Seite zu drucken, die Vorschau, die ich sehe, einige der Stile aus dem Druck-Stylesheet zu verwenden scheint, aber alles über eine mobile Medienabfrage rendert? Ich denke, dass es einen Konflikt mit einem Haltepunkt geben könnte, wird aktualisiert, wenn ich eine Chance bekomme.
UPDATE2: Ich kann sehen, dass das Druck-Stylesheet unten geladen wird, also sollte dies theoretisch alle anderen Medien-Anfragen schreiben (zumindest die, die ich zu schreiben versuche)?
Ich habe versucht,
hinzuzufügen %Vor%zu einem der style.css meiner Seiten: Funktioniert nicht.
Dann habe ich
hinzugefügt %Vor%nach den anderen Stylesheets in den Kopf und fügte die selbe Regel wie oben (ohne @media print {}) in die print.css ein. Chrome interpretiert jetzt die Regel und zeigt in der Druckvorschau nichts an.
Ich nehme an, dass das Problem @media Print ist. Aber ich habe keine Ahnung, warum sich Chrom so verhält.
BEARBEITEN: Andere Lösung über JavaScript:
%Vor%Sie können versuchen, den Rest des Stylesheets-Medienattributs als
festzulegen media="screen" und drucke das Stylesheet nach media="print" .
Dies verhindert, dass der Browser Regeln aus Stylesheets anwendet, die als "Bildschirm" markiert sind. Arbeitete für mich
Eine andere Möglichkeit, dies zu erreichen: CSS-Fehler vor den Druckstilen. Da wir alle den Anschein haben, Druckstile zuletzt zu tragen, sind sie dafür eher anfällig. Wenn CSS einen Fehler hat, beschwert es sich nicht ... es wirft nur den Rest des Stylesheets weg.
Wenn Sie die Druckstile mit einem eigenen Stylesheet versehen - selbst wenn es sich nur um ein separates Inline-Tag handelt -, können Sie dies genauso gut lösen wie den Media-Spec-in-Style-Tag-Fehler.
Ein Problem, das ich hatte, war, dass rel='stylesheet' in der print css-Verknüpfung nicht gesetzt war. Durch das Hinzufügen wurde das Problem behoben.
Tags und Links html css printing google-chrome media-queries