質問: 表題の通りですが、 例えば、 ``` 男・女 ``` という表示で、その人の性別に合った方を border-radiusを使って丸で囲っていますが、 印刷プレビューと実際に印刷したものは丸が消えてしまいます。 border-radiusを使っていないborderは全て印字されています。 ブラウザはChromeを使っていますが、 Operaでも同様でした。 (ほかも試したかったのですが、印刷プレビューが見れないのと、 印刷のもったいなさから試していません) 何か解決策はありませんでしょうか? 例えば、ですが、 background-imageで背景が透過の黒丸画像を使うというのも考えたのですが、 ``` キリン・ゾウ・マントヒヒ ``` のようにサイズの異なる選択肢もあります。 なので、全選択肢用の画像を作るのは最終手段かな、と考えています。 あ!画像をサイズに合わせて引き伸ばせばいいのか・・・。 borer-radiusが印刷される方法や、 何か他にスマートな手段がありましたらご教示願います。 ちなみに、 Chromeでのプレビュー時に「背景のグラフィック」にはチェックをつけています。 また、border-radiusはベンダープレフィックスを全て記入しています。 --追記-- border-radiusが原因ではありませんでした。 どうもその部分だけが印刷時にcss(index.css)ファイルの内容が反映されていないようで、 直接styleでcssを記入するか印刷用css(print.css)ファイルを設置してそちらに記入すると 枠線が印刷されました。 元々、始めっから印刷プレビューとして表示し、 その部分だけをJQueryで印刷ているため、 印刷用のcssは設置していませんでした。 bootstrapなどのcssの影響かとも思いましたが、 それらを削除しても変わらず、 index.cssは全てのcssの最後に読み込んでいたのを 更にその下にprint.cssをmedia="print"で設置したのですが、 print.cssを削除してindex.cssの最後にprint.cssの内容を記入したとしても やはり印刷されません。 print.cssにはこれだけしか記入していません。 ``` span.print_circle{ border:thin solid black !important; padding:2px !important; border-radius:10px !important; } ``` インライン要素だからダメなのかとも思いましたが 関係はありませんでした。 (その部分だけdivに変えたとしても全くindex.cssの内容が反映されない) 囲いが印字されるようになったのは良いのですが、 本質的解決ではないので気持ちが悪いです。
回答: 全く何も不思議なことはありませんでした。 ``` --省略-- 男・女 --省略-- ``` に対して、 index.cssでは ``` #print_wrapper span.print_circle{ border:thin solid black !important; padding:2px !important; border-radius:10px !important; } ``` print.cssでは ``` span.print_circle{ border:thin solid black !important; padding:2px !important; border-radius:10px !important; } ``` と書いており、 **JQueryではprint_wrapperの中身を印刷していました。** 自分でもどうして片方には#print_wrapperがついてもう片方にはつかなかったのか、 また、この部分だけしか#print_wrapperがついてなかったのかわかりません。 もちろん対象を絞り込むために#で始める意図はあったのですが、 他にtableやdivなどから始まる部分はある中で、 spanのこのクラスのみ、#print_wrapperから始めていました。 だからそこだけCSSが反映されなかったということです。 みなさん、お騒がせしました・・・。