Print media queries ignoriert in Chrom?

Ich bin momentan dabei, einige print-styles mit den folgenden:

@media print {
/* Styles */
}

Wie wir mit SASS allen Stilrichtungen erhalten Sie zusammengestellt in einem stylesheet, styles.css zur Laufzeit, die ist deklariert in der <head> des Dokuments wie folgt:

<link rel='stylesheet' href='/assets/css/styles.css'>

Wenn ich jetzt drucken aus chrome (Strg+P), es ignoriert völlig meine print-Stile, aber Firefox (30.0) ist in Ordnung. IE(11) ist schrecklich, aber das ist, weil wir haben eine Menge von ein - /ausblenden Bedienfelder dem IE scheint nicht, wie/

Kann nicht für das Leben von mir herauszufinden, was passiert ist. Wenn ich emulieren Printmedien in Chrome dann lädt er die Stile fein, es ist, wenn ich tatsächlich versuchen und zu drucken, dass es nicht funktioniert. Ich habe versucht, viele Dinge, hinzufügen media= Attribute, doppelte Anführungszeichen, ändern der Reihenfolge von href etc alles ohne Erfolg!!

Beachten Sie, wir sind nicht mit type mehr als ich dachte, dass Sie nicht brauchen, um verwenden Sie diese nicht mehr. Ich habe versucht, indem diese sowieso, aber es funktioniert immer noch nicht!

Ich habe es sogar so probiert: http://lawrencenaman.com/optimisation/print-media-queries-not-working/ aber es funktioniert immer noch nicht. Es macht mich verrückt, irgendwelche Ideen?

UPDATE: Also ich habe bemerkt, dass wenn ich getroffen Ctrl + P um die Seite zu drucken, die Vorschau, die ich sehe, scheint, um einige der styles aus dem Druck-stylesheet, aber das scheint zu Rendern alles mit einem mobile-media-query? Ich glaube, es gibt einige Konflikte mit einem breakpoint, wird aktualisiert, wenn ich eine chance bekomme.

UPDATE2: ich kann sehen, dass die print-Stylesheets geladen wird, an der Unterseite, so sollte dies in der Theorie schreiben über all die anderen Medien-Abfragen (zumindest die, die ich bin versucht zu schreiben über)?

InformationsquelleAutor zik | 2014-07-09
  1. 14

    Habe ich versucht, hinzuzufügen

    @media print {
    * {
        display:none;
    }
}

    auf einer meiner Seiten " Stil.css: funktioniert nicht.

    Dann habe ich

    <link rel="stylesheet" href="/css/print.css" media="print">

    nach der anderen stylesheets in den head-Bereich eingefügt und die gleiche Regel wie oben (ohne @media print {}) zu drucken.css. Chrome interpretiert jetzt die Regel und nicht die Anzeige nichts in der Druckvorschau.

    Ich würde davon ausgehen, das problem mit @media print. Aber ich habe keine Ahnung, warum chrome verhält sich so.

    BEARBEITEN:
    Andere Lösung via JavaScript:

    if(/chrome/i.test(navigator.userAgent) {
    document.write('<link  href="printChrome.css" media="print">');
}
    • Vielen Dank für Ihre Antwort dude. Ich werde dies hinzufügen und sehen, ob es funktioniert. Ich habe versucht, dies zu vermeiden, weil ich nicht wollen, fügen Sie einen anderen HTTP-Anfrage (egal wie klein).
    • Haben Sie versucht, um media="all", um Ihre Verbindung? Eine andere Lösung könnte sein, die laden einen Druck.css für chrome nur (ich habe die Lösung für mein post).
    • Noch nicht für mich arbeiten!! Ja, wir haben bereits media="all"in einem unserer SASS-Mixins in Verbindung....
    • Können Sie die kompilierte Stile.css für mich?
    • Leider nicht. Allerdings habe ich bemerkt, dass die print-styles sind ganz unten im stylesheet, die ich glaube, ist, wo Sie sein soll. Unsere anderen media queries sind mit "alle", was vielleicht das Problem sein?
    • Da "alle" beinhaltet auch "print" - Medien, kann dies das problem verursachen. Ich bin nicht wirklich in SASS. Haben Sie versucht, wickeln das Zeug in verschiedenen media queries? Wie @media screen...
    • Ja, ich hab das versucht aber es funktioniert immer noch nicht. Wie es scheint, Chrome ist mit einigen media queries für mobile und eine Kombination von print lieben. Crazy stuff! Arbeiten noch an dieser!
    • Haben Sie jemals kommen mit einem fix?
    • leider nicht. Es war nie in unserem ursprünglichen Projekt-Anforderungen und sind auf der Suche in dieses separat als Erweiterung.
    • Unser Problem war, dass die Schienen wurde das hinzufügen von ein Medien-Typ 'Anzeige' per default bei der Verwendung der stylesheet-Helfer, so dass unsere "@media print " Regeln nutzlos. Behoben durch die übergabe 'Medien: nil' auf unset Eigentum.
    • Ich habe ein ähnliches Problem, aber Chrome ist drucken die meisten meiner Stile, aber nicht alle von Ihnen, insbesondere die H1-Größe und-Farbe. Ich habe versucht, ziehen Sie die Druck-stylesheet aus und verknüpfen Sie Sie separat, aber mit dem gleichen Ergebnis H1 ist noch immer Bildschirm styling.

    InformationsquelleAutor SVSchmidt
  2. 7

    Können Sie versuchen, die Einstellung rest des stylesheets media-Attribut als

    media="screen" - und Druck-stylesheet media="print".

    Dies verhindert, dass browser-Anwendung von Regeln aus stylesheets markiert als "Bildschirm".
    Arbeitete für mich

    • Dies löste meine Probleme. Mein Haupt-stylesheet hatte immer noch den media="all" Attribut, das durch mich aus.
    • pfui! Natürlich! Vielen Dank für diese.
    • ah. meinen Tag gerettet. das hinzufügen von media="screen" für alle non-print-stylesheet hat den trick !
    InformationsquelleAutor Bilal Akhtar
  3. 2

    Ich lief in dieses problem auch und festgestellt, dass es war, weil meine rendering-Einstellungen in Chrome. Bei der Prüfung der seitenansicht hatte ich meine emulation media-Typ "drucken". Als ich ging, um tatsächlich testen Sie das drucken, ich meine media-emulation "Bildschirm". Ich sollte haben legen Sie es auf "keine emulation". Wenn es auf "Bildschirm" Druckvorschau ignoriert alle print media queries und noch behandelt die Seite, wie es war ein Bildschirm. Wenn ich schließlich auf "keine emulation" es begann sich so verhält, als man es erwarten würde.

    InformationsquelleAutor Ben Reeves
  4. 1

    Einem problem, das ich hatte war, dass rel='stylesheet' festgelegt war nicht in der print-css-link. Indem es das problem behoben.

    InformationsquelleAutor Ryan Knutson
  5. 0

    Anderen Weg, um dies geschehen zu lassen: CSS-Fehler vor dem drucken Stile. Da wir alle zu haben scheinen, den Impuls zu setzen Druckformate letzten Sie sind mehr anfällig für diese. Bei der CSS ist ein Fehler es nicht zu beklagen... es wirft den rest Weg von dem stylesheet.

    Geben die Druckformate Ihrer eigenen stylesheet-auch lediglich eine separate inline-tag--können dies lösen, sowie die Medien-spec-würde-im-Stil-tag-Fehler.

    InformationsquelleAutor Roger Krueger
Schreibe einen Kommentar