2016-09-14 5 views
1

私は赤いテキストとして負の数を表現したいテーブルがあります。問題は、印刷プレビューで最初の文字に色が適用されないことです。FirefoxからMDLで印刷すると、最初の文字は常に黒です

enter image description here

私は、メディアプリントブロックでCSSルールを持っています。私はスパンに番号を入れようとしましたが、redTextクラスをスパンとtdの両方に適用しました。私はクラス要素とそれに続くすべての要素に色を適用しようとしました。

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

HTMLは次のとおりです。

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

これは、色が正しくレンダリングされた通常のビューでHTMLです。印刷プレビューで要素を検査することが可能かどうかはわかりません。

編集:この問題は、マテリアルデザインライブラリによって発生しています。私は関連するHTMLとCSSをjsFiddleに入れました。これはうまくいく。 material.min.cssを追加すると、上記のように動作が中断します。

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

私はjsfiddleに印刷プレビューを追加しました。ここで

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

問題は表示されません。この問題は、Firefoxで実際の印刷機能を使用している場合にのみ表示されます。あなたの出力-364で

enter image description here

+2

HTMLも表示してください。 –

+2

はコードを共有していますか、作業例 –

+1

を投稿してください。それはうまくいくhttps://jsfiddle.net/AhirHasmukh/8fzby8aq/1/です。私は印刷を試みました。 –

答えて

2

印刷またはメインスタイルシートには、最初の文字のCSSを記載している可能性があります。

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

私はcodepenで試してみましたが、質問セクションのコードを入力してもうまくいきました。

+0

私はjsfiddleを作成しました。 https://jsfiddle.net/goldrydigital/8fzby8aq/2/この動作はプロジェクトのmdl cssライブラリによって引き起こされます。再度確認できますか?ご協力いただきありがとうございます。 –

+0

暗黙のうちに#f44336という色を設定して、正しい結果を得ます。非常に奇妙な。私は最初の手紙をどこにでも黒であると定義しなかった。実際、私は今までに最初の文字のセレクタについて知りませんでした。 –

0
たぶん

あなたは間違った場所であなたのスパンを入れている...

はまだそれが最初の数字を残している任意のカンマやドットを持っているし、すべてが着色赤で休まないでください。

私はあなたにお勧めします、HTMLタグをチェックしてください。

+0

私はjsfiddleを作成しました。 https://jsfiddle.net/goldrydigital/8fzby8aq/2/この動作はプロジェクトのmdl cssライブラリによって引き起こされます。再度確認できますか?ご協力いただきありがとうございます。 –

1

Santoshはこの問題を解決するのに役立つ良い答えを提供します。ここでは、問題を引き起こすmdl cssライブラリのビットを確認するだけです。明らかに、黒はこのように速く印刷されます。

関連する問題