IE/Chrome/Firefoxでの印刷プレビュー（または印刷）時に画像が表示されない

Question

私はウェブ開発者であり、デザインではほとんど動作しませんが、このバグを修正して苦労しています。

一部の画像は印刷プレビューページを印刷/表示すると正しく表示されますが、一部の画像は正しく表示されません。私が見ることができる主な違いは、表示されない画像はスパースタグで、画像はCSSで適用され、ワー​​キング画像はimgタグを使用するということです。で

<li class="media"> 
    <div class="img"> 
     <div class="h6"> 
      <strong>Spouse</strong></div> 
      <img src="image.gif" alt="" class="person-thumb dropshadow" /> 
     </div> 
    <div class="bd"> 
     <p class="mbn">Husband</p> 
     <h3 class="profile-subtitle"> 
      <a href="path">Thomas&nbsp;<strong>Name</strong></a> 
     </h3> 
     <p class="mbn">?&#45;?</p> 
    </div> 
</li> 

：

<li class="media"> 
    <div class="img"> 
     <div class="h2 mtm">1889</div> 
     <span class="timeline-icon icon-birth"></span> 
    </div> 
    <div class="bd"> 
     <h3 class="profile-subtitle mts">Born in ?</h3> 
     <p class="deemphasis mbn"> 
     <a href="/search/results/bmdindexedbirths/bibby/elizabeth%20?yearofbirth=1889">Search  for Birth Record</a> 
     </p> 
    </div> 
</li> 

Image.gif は表示を行います。

スパン誕生が表示しない "アイコン" と：ここ

は、HTMLの例です。一部のブラウザではプレビューでは大丈夫ですが印刷しませんが、他のブラウザでは表示されず、まだ表示されません印刷します。

ありがとうございます！

Answer 1

私は2ヶ月以上前に同じ問題を抱えていました。ユーザーにプリンタフレンドリーなページにリダイレクトされたボタンがあり、Javascriptを使用して印刷ダイアログが表示されました。

CSSバックグラウンドで指定された画像がダウンロードされるまで、ブラウザーが待機しないという問題がありました。

プリントダイアログを起動してイメージをダウンロードするブラウザ時間を与える前にタイムアウトを設定しました。この方法は信頼できるものではありません。なぜなら、誰もダウンロード速度が一定でなく、インターネット接続が非常に遅いユーザーにイメージがダウンロードされる前に印刷ダイアログを開くからです。

最後に、最後の画像がダウンロードされたときに印刷ダイアログをトリガーするために、HTML imgタグを使用してマイページとjQueryに画像を埋め込みました。

Answer 2

、印刷スタイルシートを作成し、ディスプレイにあなたのスパンを設定します。あなたは、印刷する前に遅延を配置する必要があり

Answer 3

をブロックします。クロムにはネイティブのバグがあります。

その0に設定されている画像の幅 - ：コードは、のように下になり

function PrintDiv(data) { 
    var mywindow = window.open(); 
    var is_chrome = Boolean(mywindow.chrome); 
    mywindow.document.write(data); 

    if (is_chrome) { 
    setTimeout(function() { // wait until all resources loaded 
     mywindow.document.close(); // necessary for IE >= 10 
     mywindow.focus(); // necessary for IE >= 10 
     mywindow.print(); // change window to winPrint 
     mywindow.close(); // change window to winPrint 
    }, 250); 
    } else { 
     mywindow.document.close(); // necessary for IE >= 10 
     mywindow.focus(); // necessary for IE >= 10 

     mywindow.print(); 
     mywindow.close(); 
    } 

    return true; 
} 

Answer 4

ちょうどそれは、IMG {：：;;自動高さ100％のmax-width}を動作させるために、以下のスタイルを追加します問題の原因となっている印刷物に