2 つのスタイルシートが含まれている Web ページがあります。
<link rel="stylesheet" href="/assets/css/screen.css" type="text/css" media="all" />
<link rel="stylesheet" href="/assets/css/print.css" type="text/css" media="print" />
印刷スタイルは、chrome、safari、firefox、IE9 では問題なく動作しますが、IE7 と IE8 では完全に機能しません。非表示にする必要がある特定の画像は非表示にできませんが、表示する必要がある画像は非表示にできます。IE7 と IE8 で画面用の両方のスタイルシートをロードすると、すべてが期待どおりに見えるという事実にもかかわらず、混乱しているように見えます。
残念ながら、進行中のクライアント サイトであるため、ページにリンクすることはできませんが、アイデアがあればここでストローをつかんでいます.
結局のところ、問題は HTML5 要素が印刷時に適切にレンダリングされず、HTML5 shiv がデフォルトで印刷をサポートしていないことでした。
私 (そしてあなた) にとって幸運なことに、Alexander Farkas によって作成された IE 印刷保護プラグインがここにあります: https://github.com/aFarkas/html5shiv
編集：
すべての shiv-ing (完全に単語) のニーズに Modernizr を使用している場合、Modernizr には print shiv オプションがあるようです: http://modernizr.com/download/
これは、CSS とマークアップ、または少なくともそのかなりの部分を確認せずに暗闇で撮影したものです。
この msdn articleへのコメントに記載されているように、position:absolute要素の印刷には問題があります。それらを手動でリフローする必要があることを意味します（要素を設定するか、場合によっては完全に非表示にします）。それに対処するハードコアな方法は、追加することですfixedposition:static
* {position:static !important;}
あなたにprint.css; ただし、その適切性は、ページの複雑さと印刷方法 (テキスト、ヘッダー、ロゴのみ、または適切にデザインされたエクスペリエンス) によって異なります。
作成したい印刷エクスペリエンスをまだ決定していない場合は、それに焦点を当てた別のalistart に関するすばらしい記事を読むことを検討してください。
印刷スタイルを代替として示す必要があると思います...
<link rel="stylesheet" href="/assets/css/screen.css" type="text/css" media="all" />
<link rel="alternate stylesheet" href="/assets/css/print.css" type="text/css" media="print" />
実際、それは間違っていると思いますが、私はそれを残しています。
印刷スタイルのメディア属性を all に変更してから、すべてを印刷メディア クエリのスタイルシート内にラップしてみてください。
@media print { … }
参考までに、IE9と「代替」でこの問題が発生しました。
<link rel="alternate stylesheet" href="......." type="text/css" media="print" />
IE9で私のために働いた!