誰かがボタンをクリックすると、htmlページ(ページの下半分)のdivDisplayと呼ばれる特定のdivのコンテンツを出力するJS関数があります。このdivのコンテンツは、ユーザーがページを操作したときに動的に受信されます(ajax)。印刷はFF、OPERA、IEで完全に機能しますが、データは色なしでスクランブルされ、印刷されるポップアップウィンドウのクロムとサファリで正しい位置から外れます(cssフォーマットがないかのように)。
function jsPrintDiv(m) {
glblPopupWindow = window.open("", "PrintWindow", "width=1024,height=768,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
glblPopupWindow.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><link rel="stylesheet" type="text/css" href="styles.css"></head><body><div name="divDisplay" id="divDisplay">' + document.getElementById(m).innerHTML + '</div></body></html>');
glblPopupWindow.document.close();
glblPopupWindow.document.getElementById("divDisplay").style.top = "0px";
glblPopupWindow.focus();
glblPopupWindow.print();
glblPopupWindow.close();
}
styles.cssは、印刷が行われている元のhtmlページと同じcssファイルです。同じことがdoctypeにも当てはまります。
divDisplayのcss :
#divDisplay {
position: absolute;
left: 0.2%;
top: 305px;
width: 99.6%;
bottom: 0.5%;
/* height: expression(document.body.offsetHeight - 314 + "px"); */
overflow: auto;
background-color: #AACCFF;
font-family: palatino linotype;
font: palatino linotype;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
私が間違っているかもしれないアイデアはありますか?前もって感謝します!
編集:
印刷するポップウィンドウの正しいデータ(firefox):http: //img208.imageshack.us/img208/8195/ffprint.jpg
印刷するポップウィンドウのスクランブルデータ(クロム):http: //img152.imageshack.us/img152/6108/chprint.jpg
EDIT2: コメントアウトした場合
glblPopupWindow.print();
行、クロムはそれを正しく表示します。それが役立つかどうかわからない。