Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

页边距的打印设置

  网页的内容部分全部都在BODY标签中,而文档可以视为HTML标签,那么对于网页来说,页边距就是BODY的margin值。但网页本身整个是连续的,将它放在打印机这种分页媒体上,效果就会变得很奇怪。会出现中间的页面没有垂直页边距的情况。
  下面这个代码就是如此 <!DOCTYPE html>
<style>
body {margin:10%;}
td {font:32px/1.25 Simsun;}
</style>
<table>
<script>
for(var i=0;i<60;i++)document.write("<tr><td>"+i+"</td></tr>");
</script>
</table>
  虽然浏览页面时候可以看到那10%的margin。

  但在打印预览中就只有第一页的顶部和最后一页的底部有垂直方向的margin。

  解决这个问题需要使用@page,把上面代码中的body {margin:10%;}改为@page {margin:10%;},这样虽然在页面浏览上无法直接看到也边距,但打印时就可以正常处理。或者如果页面需要同时用于浏览和打印时,可以使用@media print来选择性地对一些情况做特殊处理。
<!DOCTYPE html>
<style>
@page {margin:10%;}
@media print { body {margin:0% !important;} }
body {margin:10%;}
td {font:32px/1.25 Simsun;}
</style>
<table>
<script>
for(var i=0;i<60;i++)document.write("<tr><td>"+i+"</td></tr>");
</script>
</table>

  当然,和昨天的文章一样,这些特性目前只有IE和Firefox上可以生效,Chrome的打印功能暂时还是渣的。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^