IE druckt eine Leerzeile nach dem Leerzeichen, wenn das Leerzeichen vorangestellt ist <br> tag, wenn es auf dem tatsächlichen Drucker gedruckt wird, aber nicht, wenn der IE-Browser HTML anzeigt
https://stackoverflow.com//questions/9641589
-
10-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Heute bin ich auf ein Styling-Problem gestoßen, wenn eine HTML-Seite von IE 9 auf einen Drucker gedruckt wurde (aber nicht, wenn ich in anderen Browsern auf einen Drucker drucke).Ich habe CutePDFWriter verwendet, um dasselbe zu tun, was der Drucker tut, und es reproduziert.Wenn Sie den HTML-Code im Browser anzeigen, gibt es keine Leerzeile unter der Barbiturate-Substanzfamilie für IE 9 oder einen anderen Browser.Dies ist ein Tabellen-tr-td-Tag mit mehreren Zeilen.Die Zeile mit einem Leerzeichen am Ende und einem <br> im Folgenden wird eine Leerzeile gedruckt.Ich habe die Stile doppelt überprüft und es gibt kein media = 'print'-Attribut für Stile.Wenn ich das Leerzeichen am Zeilenende entferne, wird die Leerzeile nicht gedruckt.Ich werde das irgendwann nächste Woche durch einen Eliminierungsprozess lösen, aber wenn Sie ein CSS-Genie sind und mir sagen können, was das verursacht, gebe ich Ihnen einige Punkte.
Ja, ich kann es lösen, indem ich das Leerzeichen entferne, aber ich akzeptiere nur Antworten, die mir sagen, welche Stile dies verursachen oder welche Stile hinzugefügt werden sollen.
Ich habe das gesamte HTML-Markup rund um das Problem entfernt, damit das HTML leicht zu sehen ist.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>SNIP</title>
<script type="text/javascript" src="report_files/prototype.js"></script>
<script type="text/javascript" src="report_files/script.js"></script>
<script type="text/javascript" src="report_files/effects.js"></script>
<script type="text/javascript" src="report_files/window.js"></script>
<script type="text/javascript" src="report_files/md5.js"></script>
<script type="text/javascript" src="report_files/jquery-1.js"></script>
<script type="text/javascript" src="report_files/jquery-ui-1.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function() {
jQuery('.LIMSFormField').focus(function() {
jQuery(this).css('border-color', '#000000');
jQuery(this).css('background-color', '#90EE90');
}).blur(function() {
jQuery(this).css('border-color', '#FFFFFF');
jQuery(this).css('background-color', '#7AC5CD');
});
});
</script>
<script type="text/javascript" src="report_files/droplinemenu.js"></script>
<script type="text/javascript">
droplinemenu.buildmenu("mainMenu");
</script>
<script type="text/javascript" src="report_files/jslib.js"></script>
<meta name="vs_defaultClientScript" content="JavaScript">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
</head>
<body>
<div id="sessionRefresh" style="display:none">
<div style="text-align: center; width: 250px">
<div>Your session is about to expire</div>
<div id="btnRefresh" class="submitbutton" style="margin: 15 auto; float:none">
<a href="javascript:void(0)" onclick="resetSessionTimer()">Keep Alive</a>
</div>
<div style="clear:both"></div>
</div>
</div>
<script type="text/javascript" language="JavaScript">
var currentDS = new Date(2012,3,9,15,37,13);
var forceLogOffDS = new Date(2012,3,9,16,7,13);
var forceLogOffDifference = forceLogOffDS - currentDS;
var logoutTimer = window.setTimeout('LogoffSessionTimeout()', forceLogOffDifference);
</script>
<form name="Form1" method="post" action="ResultReportPrintPage.aspx?TestIds=956542%2c956543%2c956545%2c956546&ShowSummary=False&CausePrintDialog=True" onsubmit="javascript:return WebForm_OnSubmit();" id="Form1">
<div>
<input name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTQ4NDA1OTg3OWRkdXgKbQNiK5Ot/Yx+zK7sKevaBb8=" type="hidden">
</div>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
return CheckSubmit();
return true;
}
//]]>
</script>
<style type="text/css">
td, select, input, .copyright, div
{
font-family: "times new roman";
font-size: 12px;
color: #000000
}
.worksheetPage { font-size: 12; width: 100%; height: 98%; page-break-after: always }
.lastWorksheetPage { font-size: 12; width: 100%; height: 98% }
.ResultDetails { }
.ResultDetails td { }
.UnderlinedCell { border-bottom: 1px solid #0066cc; PADDING-RIGHT: 10px; PADDING-LEFT: 10px }
.LanAndSpecimenId td { font-size: 14px }
.LanAndSpecimenIdLabel { text-align: right }
.LanAndSpecimenIdValue { border-bottom: 1px solid #0066cc; font-weight: bold; text-align: center; PADDING-RIGHT: 15px; PADDING-LEFT: 15px }
.DatesValue { text-align:center; border-bottom: 1px solid #0066cc; PADDING-RIGHT: 10px; PADDING-LEFT: 10px }
.FirstTestName { font-weight: bold; font-size: 17 px }
.TestDescription { font-size: 12px }
.ProcessHeader { font-weight: bold; font-size: 14px; border-bottom: 1px solid #0066cc }
.ProcessDetails { }
.SubProcessDetailsHeader td { font-weight: bold; font-size: 15px }
.ExplainMeasurements td { font-style: italic; font-size: 13px; border-bottom: 1px solid #0066cc }
.HighlightedSubprocessResults { font-weight: bold }
.BigFinalResults { border: 2px solid #000000 }
.BigFinalResultsHeader { font-weight: bold; font-size: 16px; border-bottom: 2px solid #000000 }
.BigFinalResultsResult { font-weight: bold; font-size: 14px }
.BigFinalQuantitative { font-weight: bold; font-size: 14px }
.NotesHeader { text-align:center; font-weight: bold }
.NotesTable td { font-size: 12 px }
.CompanyContactFooter { text-align: center; font-weight: bold; font-size: 13px }
.worksheetGrid { width: 100%;border: 1px solid #000000 }
.worksheetGrid td, th { border-right: 1px solid #000000;border-bottom: 1px solid #000000 }
th
{ COLOR: #003366; vertical-align: baseline;
font-size: 1em;
font-weight: bold;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
font-family: Arial, Helvetica, sans-serif
}
</style>
<link rel="stylesheet" type="text/css" href="report_files/NYReports.css">
<table>
<tbody><tr>
<td>
<table style="border-width: 0px;" cellpadding="0" cellspacing="0">
<tbody><tr>
<td>Test(s) Requested:</td>
<td>
<img src="report_files/spacer.gif" alt="" height="1" width="20">
</td>
<td class="FirstTestName">Oral Fluid 10 Drug Panel Test</td>
</tr>
</tbody></table>
</td>
</tr>
<tr><td class="TestDescription">The Oral Fluid 10 Drug Panel Test includes:<br>Amphetamine - Amphetamine<br>Methamphetamine/Ecstasy (MDMA) - Methamphetamine, Ecstasy (MDMA), MDA, MDEA<br>Cocaine - Cocaine, Benzoylecgonine<br>Opiates - Codeine, Morphine, Heroin Metabolite, Hydrocodone (Vicodin, Lorcet, Lortab)<br>Phencyclidine (PCP)<br>THC (Marijuana)<br>Barbiturates - Secobarbital, Butabarbital, Butalbital, Pentobarbital, Phenobarbital and Amobarbital <br />Benzodiazepines - Diazpam, Nordiazepam, Alprazolam and alpha-hydroxyalprazolam<br>Oxycodone (Percocet)<br>Methadone</td></tr>
</tbody></table>
</body></html>
Lösung
Dies ist definitiv ein seltsamer Fehler, aber es hat damit zu tun, dass Ihre Tabellenbreite nicht definiert ist.Standardmäßig passt sich eine Tabelle ohne festgelegte Breite automatisch an die Breite des enthaltenen Inhalts an, bis zu dem in ihrem Container verfügbaren Maximum.Jetzt kommt der lustige Bug-Teil...
Normalerweise wird dies in der HTML-Ansicht ignoriert, da der Leerraum am Ende (vom Browser) entfernt wird, als ob er nicht existiert.Aber anscheinend wird dieser Leerraum beim Wechseln in den Druckmodus nur teilweise ignoriert.Es wird in dem Sinne ignoriert, dass der zusätzliche Platz ist nicht wird verwendet, um die Tabelle weiter zu erweitern, aber die Druckfunktion sieht aus irgendeinem Grund immer noch, dass sie vorhanden ist.So...
Die Breite der Tabelle wurde so festgelegt, dass sie der Größe dieser Zeile ohne Leerzeichen entspricht. Beim Drucken wird dann versucht, dieses Leerzeichen der Zeile "erneut hinzuzufügen", indem es auf die nächste Zeile darunter gedrückt wird, bevor zu einer anderen neuen Zeile gewechselt wird.
Sie haben bereits eine Lösung identifiziert zu diesem Fehler:entfernen des Leerzeichens am Ende der Zeile.Denken Sie daran, dass dies bei jeder Zeile auftreten würde, die zufällig die längste Zeile im Text ist und am Zeilenende auch ein Leerzeichen am Ende der Zeile hat.Wenn ich zum Beispiel diese Zeile vollständig entfernt und am Ende der MDEA-Zeile (die die nächstlängste ist) ein Leerzeichen hinzugefügt habe, würde diese Zeile einen "Ersatzzeilenumbruch" darunter haben, der demselben Muster folgt.
Entfernen des Leerzeichens würde seien Sie die praktikabelste Lösung, wenn die Texteingaben manuell sind.Wenn dies generierter Text oder etwas anderes ist, ist dies möglicherweise nicht die Option. Eine andere Lösung besteht darin, die Breite der Tabelle auf 100% zu setzen (ich habe sie der äußeren Tabelle hinzugefügt), damit sie sich über die gesamte Seite erstreckt (und daher nicht ihre eigene Breite herausfinden muss).
Auch, wie in den Kommentaren erwähnt, verwenden Sie IE7 Kompatibilitätsmodus, wo sich der Fehler befindet.IE9 hat diesen Fehler eigentlich nicht (ich habe ihn getestet), daher würde das Entfernen dieses Metaelements auch das Problem beheben (wenn Sie den Kompatibilitätsmodus nicht benötigen).
