CSS 页眉 - 如何使用打印边距? [英] CSS page headers - how to use print margins?

查看:47
本文介绍了CSS 页眉 - 如何使用打印边距?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我可以在每页上打印一个标题,但我不熟悉打印边距.我认为 @page css 会起作用,但它似乎不会影响页边距.如果我在正文上设置边距,它在第一页上有效,但后续页面默认从顶部边距开始,将标题放在文本顶部.

I can get a header to print on each page, but I'm new to print margins. I thought the @page css would work, but it does not seem to affect page margins. If I set the margins on the body, it works on page one, but subsequent pages start the top margin at the default, putting the header over top of the text.

<style>  
.header {  
 position: fixed;  
 top: 0;  
}  
@page {  
 size: 11in 17in;  
 margin-left: 1in;  
 margin-right: 1in;  
 margin-top: 1in;  
 margin-bottom: 1in;  
} 
</style>

<body>  
<span class=header>This is the header</span>  
This is the text of the document. (repeat until I get to page 2)  
</body>

推荐答案

所有浏览器对打印的支持都非常差,许多流行浏览器中的可怕错误已经多年未得到修复.

Printing support by all browsers is very poorly supported with horrendous bugs in many popular browsers that have gone unfixed for years.

如果您需要确保特定的布局,简短的回答是避免 HTML/CSS 打印.使用 PDF,可能按需动态生成.有各种 PDF 生成器 API,例如 iTextSharp.可以从 Flash 打印,但前提是 Flash 已安装并正常工作(即没有 Flashblock,iOS).

The short answer is to avoid HTML/CSS printing if you need to ensure a specific layout. Use PDF, possibly dynamically generated on-demand. There's various PDF generator APIs such as iTextSharp. It's possible to print from Flash, but only if Flash is installed and working (i.e. no Flashblock, iOS).

HTML/CSS 打印应仅限于简单的布局.表单打印是 fieldset 的噩梦 &legend 支持尤其成问题(尤其是在 Firefox 上).有趣的是,在 Internet Explorer 上打印支持最好.

HTML/CSS printing should be restricted to simple layouts. Form printing is a nightmare with fieldset & legend support being especially problematic (particularly on Firefox). Interestingly printing support is best on the internet explorers.

CSS3 打印支持规范尚未完成,需要一段时间.

The CSS3 printing support specification hasn't been completed and is some time off.

一般原则:

  • 不支持背景或背景 CSS 图像(默认情况下 - 用户可以更改内部网应用程序的浏览器设置).仅打印前景图像.

  • No backgrounds or background CSS images are supported (by default - users can change their browser settings for an intranet application). Only foreground images print.

宽度需要灵活变化,因为地球上的页面大小各不相同.US Letter 格式比 A4 布局更短更宽

Widths need to be fluid as page sizes vary around the planet. US Letter format is shorter and wider than A4 layout

所有浏览器都支持以不同方式打印.错误很多.

All browsers support printing in different ways. Bugs are legion.

使用打印预览进行测试.

Test using print preview.

这篇关于CSS 页眉 - 如何使用打印边距?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆