Erster Buchstabe ist immer schwarz beim Drucken mit MDL von Firefox

Question

Ich habe Tabellen, in denen ich negative Zahlen als roter Text darstellen möchte. Das Problem ist, dass in der Druckvorschau die Farbe nicht auf den ersten Buchstaben angewendet wird.

Ich habe CSS-Regeln in einem Medien-Druckblock. Ich habe versucht, die Zahl in einen Bereich zu setzen und die redText-Klasse sowohl auf den Bereich als auch auf den td selbst anzuwenden. Ich habe versucht, die Farbe auf das Klassenelement und jedes nachfolgende Element anzuwenden.

@media print { 
    .redText, .redText * { 
    color: #f44336 !important; 
    } 
} 

Die HTML ist:

<td class="textRight band0Bchange_ue_04 redText"> 
    <span class="redText">-1,566</span> 
</td> 

Dies ist der HTML-Code in der regulären Ansicht, in der die Farbe richtig wiedergegeben wird. Ich bin mir nicht sicher, ob es möglich ist, die Elemente in der Druckvorschau zu überprüfen.

Bearbeiten: Das Problem wird durch die Material Design-Bibliothek verursacht. Ich habe das relevante html und css in eine jsFiddle gelegt. Das funktioniert gut. Sobald ich material.min.css hinzufüge, bricht der Druck mit dem oben beschriebenen Verhalten.

https://jsfiddle.net/goldrydigital/8fzby8aq/2/

Ich habe eine Druckvorschau auf dem jsfiddle hinzugefügt.

https://jsfiddle.net/goldrydigital/8fzby8aq/6/

Hier ist das Problem nicht angezeigt. Das Problem ist nur sichtbar, wenn ich die eigentliche Druckfunktion in Firefox verwende.

Answer 1

Bitte überprüfen Sie, haben Sie möglicherweise geschrieben ersten Buchstaben CSS für Druck oder Haupt Stylesheet.

.redText::first-letter { 
    color: #000000; 
} 

Ich versuchte in Codepen auch funktioniert es gut, wie Sie den Code in Frage Abschnitt zur Verfügung gestellt.

Answer 2

Vielleicht haben Sie Ihre Spanne bei falscher Stelle setzen ...

In Ihrer Ausgabe -364 haben kein Komma oder Punkt nach wie vor ist es die erste Stelle zu verlassen und ruhen alle sind rot gefärbt .

Ich schlage vor, überprüfen Sie die HTML-Tags.

Answer 3

Santosh bietet eine gute Antwort, die mir geholfen hat, dieses Problem zu lösen. Hier nur, um das Bit in der MDL CSS-Bibliothek zu bestätigen, die das Problem verursacht. Anscheinend druckt Schwarz auf diese Weise schneller.