html - 当打印到实际打印机时，当空格位于 <br> 标记之前时，IE 将在空格后打印空行，但当 IE 浏览器显示 HTML 时则不会

标签 html css printing internet-explorer-9 blank-line

今天，当 HTML 页面从 IE 9 打印到打印机时(但在其他浏览器中打印到打印机时则没有)，我遇到了样式问题。我使用 CutePDFWriter 执行与打印机相同的操作并复制它。如果您在浏览器中查看 HTML，则 IE 9 或任何其他浏览器的巴比妥类物质家族下方没有空行。这是一个表 tr td 标记，其中有多行。该行末尾有一个空格，以及 <br>下面打印一个空行。我仔细检查了样式，发现任何样式上都没有 media='print' 属性。如果我删除行尾的空格，它不会打印空行。我最终将在下周通过排除法解决这个问题，但是如果你是一个 CSS 天才并且可以告诉我是什么原因造成的，我会给你一些分数。

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

enter image description here

我删除了围绕该问题的所有 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>

最佳答案

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

通常在 HTML View 中，这会被忽略，因为末尾的空白会被(浏览器)删除，就像它不存在一样。但显然进入打印模式时，该空白仅被部分忽略。它被忽略，因为额外的空间不用于继续扩展表格，但打印功能无论出于何种原因仍然看到它在那里。所以...

表格的宽度已确定为不带空格的该行的大小，然后在打印时尝试将该空格“重新添加”到该行，将其向下移动到该行下方的下一行，然后再中断到该行另一条新线。

您已经确定了针对此错误的一种解决方案:删除行尾的空格。请记住，无论哪一行碰巧是文本中最长的行并且行尾有一个尾随空格，都会发生这种情况。例如，如果我完全删除该行并在 MDEA 行(第二长的)末尾添加一个空格，则该行下方将有一个“备用换行符”，遵循相同的模式。

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

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

关于html - 当打印到实际打印机时，当空格位于 <br> 标记之前时，IE 将在空格后打印空行，但当 IE 浏览器显示 HTML 时则不会，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9641589/

上一篇：javascript - 当可见的原始 ul 中有 0 个项目时，为什么溢出菜单无法正常工作？

下一篇：javascript - 我可以将跨站点 <img/> 标记的数据作为 blob 获取吗？

相关文章：

html - 间距和创建新行的问题

html - 如何在 CSS 中忽略父级的宽度限制

CSS 过渡不起作用

C++打印从字符串字符派生的整数

javascript - 如何在ajax调用后返回的html页面上调用window.print

HTML5 - 选择多个必需的复选框

javascript - HTML - 文档本身(正文)中的appendChild()

html - 如何确保 JAWS 读取链接文本而不是 URL？

php - 用 PHP 替换图像标签周围的链接

java - 在热敏打印机 Java 上打印

©2024 IT工具网  联系我们