2

今天，当从 IE 9 将 HTML 页面打印到打印机时，我遇到了样式问题（但当我在其他浏览器中打印到打印机时却没有）。我使用 CutePDFWriter 来做与打印机相同的事情并复制它。如果您在浏览器中查看 HTML，则 IE 9 或任何其他浏览器的巴比妥类物质系列下方没有空行。这是一个表格 tr td 标记，其中包含多行。末尾有空格的行，<br>后面打印一个空行。我仔细检查了样式，并且任何样式都没有 media='print' 属性。如果我删除行尾的空格，它不会打印空行。下周我最终会通过消除过程来解决这个问题，但是如果你是一个 CSS 天才并且可以告诉我是什么原因造成的，我'

是的，我可以通过删除空格来解决它，但我只会接受告诉我导致此问题的样式或添加什么样式的答案。

在此处输入图像描述

我删除了围绕该问题的所有 HTML 标记，以便 HTML 易于查看。

<!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&amp;ShowSummary=False&amp;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>
4

1 回答 1

2

这绝对是一个奇怪的错误，但它与您的表格宽度未定义有关。默认情况下，没有设置宽度的表格会自动调整为其包含内容的宽度，直至其容器内可用的最大值。现在来了有趣的错误部分......

通常在 HTML 视图中，这会被忽略，因为结尾的空白被（被浏览器）剥离，就像它不存在一样。但显然进入打印模式，该空白仅被部分忽略。从某种意义上说，它被忽略了，额外的空间不用于继续扩展表格，但无论出于何种原因，打印功能仍然可以看到它在那里。所以...

表格的宽度已被确定为没有空格的那条线的大小，然后在打印时尝试将该空间“重新添加”到该行，将其向下撞到该行下方的下一行，然后再换行.

您已经确定了解决此错误的一种方法：删除行尾的空格。请记住，这将发生在任何一行恰好是文本中最长的行并且在行尾有一个尾随空格的情况下。例如，如果我完全删除了该行并在 MDEA 行的末尾添加了一个空格（这是下一个最长的），那么该行下面将有一个“备用换行符”，遵循相同的模式。

如果文本条目是手动的，则删除空格将是最可行的解决方案。如果这是生成的文本或其他东西，那可能不是选项。另一种解决方案是将表格的宽度设置为 100%（我将其添加到外部表格中），以便它跨越整个页面（因此不必计算自己的宽度）。

此外，正如评论中所指出的，您正在使用IE7 兼容模式，这是错误所在。IE9 实际上没有这个错误（我测试过），因此删除该元元素也可以解决问题（如果您不需要兼容模式）。

于 2012-03-09T22:40:11.317 回答