打印 CSS：顶部空白

Posted 2023-03-06

【中文标题】打印 CSS：顶部空白

【英文标题】：Print CSS: Empty white space at top

【发布时间】：2011-11-10 17:50:17

【问题描述】：

努力解决似乎是一个常见问题，但到目前为止我发现的任何建议都没有奏效。我正在制作用于打印的样式表，该页面仅包含一个表格和一个 h1 标签。

问题是我在页面顶部有空白区域，大约 1/4 的页面是纵向的，一半的页面是横向的 - 这对我的用户来说显然是不可接受的。

我已经尝试在我能想到的每个可能的元素上将边距归零，包括 body、html、table、tr 和 tr。 粘贴下面的 HTML 和 CSS（一些标签用于其他 HTML，而不是在下面找到，这些是其他页面也使用相同的 CSS 进行打印），希望这是一个简单的修复或缺少边距 :)

/*Print CSS template */
body, #content, #container 
   width: 100%;
   margin: 0;
   float: none;
   background: #fff url(none);


#topnav, #navbar, #nav, #sidebar, .ad, .noprint 
   display: none; 

body 
   font: 1em Georgia, "Times New Roman", Times, serif;
   color: #000; 


h1,h2,h3,h4,h5,h6 
   font-family: Helvetica, Arial, sans-serif;
   color: #000;

h1  font-size: 250%; 
h2  font-size: 175%; 

a:link, a:visited 
   color: #00c;
   font-weight: bold;
   text-decoration: underline; 
#content a:link:after, #content a:visited:after 
   content: " (" attr(href) ") ";


/*Print CSS template END */

.r_main

    width: auto;
    padding: 0;
    margin: 0;



table
   margin: 0;
   padding: 0;


.r_wrap

    margin: 0;
    width: 100%;
    display: block;
    min-height: 30px;
    float: left;
    display: block;
    border-bottom: 1px solid #000;


.r_left 

    margin: 0;
    width: 300px;
    color: #000;
    display: block;
    float: left;
    font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;


.r_right

    margin: 0;
    display: block;
    float: left;
    color: #000;
    font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;


.r_right p

    padding: 0;
    margin: 7px 0 3px 0;
    font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;


.r_left span, .r_right span

    display: block;

    margin: 0;
    padding: 5px 0 0 0;


.r_right ul 


    margin: 3px 0 0 15px;
    padding: 0;


.r_right ul li

    margin: 0;
    padding: 3px 0 0 0;


.r_zeb1

    background-color: #f9f9f9;


.r_zeb2

    background-color: #e9e9e9;    
   

HTML

<table>
<tr class="r_wrap r_zeb2">                               
<td class="r_left"><span>Location</span></td>
<td class="r_right"><span>'.$frm->get_location($selectedE['e_location']).'</span></td>
</tr>
</table>

【问题讨论】：

请修复您的 html，我认为并非所有 ' 都可以通过 w3c 验证器。

' 是 php 回显的剩余部分。但是，我会删除它们:)

如果您转到另一台计算机，您会遇到同样的问题吗？

我没有看到您在此处描述的问题（使用 Firefox、IE9 和 Chrome）：jfcoder.com/test/printcss.html

我认为您在打印机设置设置中选择了垂直居中的内容。在浏览器中检查您的打印机设置。

【参考方案1】：

假设 h1 在表格之前，这可能是问题所在。您可能希望将其上的边距和填充归零。它还可以帮助您将字体大小切换为“pt”而不是使用 %。

h1
   margin:0;
   padding:0;
   font-size: 36pt;
   

【参考方案2】：

同意user401183，我认为是字体大小

h1  font-size: 250%; 
h2  font-size: 175%;