Question

为了做一个简短的故事，我负责修复Microsoft SP的所有这些CSS问题。一个是内容无法在FireFox中打印（一个众所周知的错误，Mozilla似乎无法解决）。所以我必须专门为FireFox创建一个样式表，以便打印内容。

我已经解决了这个问题并打印好了。我现在遇到的问题是页脚不会停留在内容的底部，因为内容有位置：绝对（FF打印错误的修复程序之一）。

这是（大致）HTML代码：

<div id="ncs">
 <div class="ncs_content">
  <div class="ncs_stage">
   <div class="ncs_stage_top">
    <div class="ncs_stage_content">content...</div>
   </div>
  </div>
 </div>
 <div class="ncs_footer">turned off content</div>
 <div class="ncs_footer_printed_date">print date that needs to be displayed</div>
</div>

我的CSS：

#ncs { border: none; width: 100%; height: 100%; float: none; background: none; }
.ncs_content { background: none; border: none; float: none; }
/* this fixes the FF bug */
.ncs_stage_content {
    float: none;
    overflow: visible !important;
    position: absolute;
    height: auto;
    width: 90%;
    font-size: 14px;
    padding: 20px 0px;
    margin: 10px 0px;
    font-size: 120%;
    clear: both;
    display: block;
}
.ncs_footer { clear: both; height: 100%; position: relative; }

.ncs_footer_printed_date {
    float: left; 
    display: block;
    width: 950px;
    position: relative;
    bottom: 0;
    left: 0;
    clear: both;
    height: 120%;
    vertical-align: bottom;
}

我得到它在每页打印页脚，但这还不够好。他们希望它打印在内容的底部。

我几天来一直在努力解决这个问题，所以任何想法都会受到高度赞赏。我非常擅长CSS，但是当谈到微软制造的东西的愚蠢问题时，它真的很令人沮丧。

感谢您的任何建议!!!

Answer 1

如果我误解了，请原谅我，但是如何使用页脚的绝对定位呢？

Answer 2

如果您在内容div中移动了页脚，该怎么办？它应该将自己定位在页面的底部..（我知道这会打破文档的逻辑结构，但如果它能为你节省很多痛苦，总而言之......嘿，谁在乎？;-)）

页脚的绝对定位不会解决问题，'因为两个块'的位置仍然是独立的

Answer 3

Wohoo！我想通了！

感谢您的帮助。这是我的CSS修复它：

#ncs {
    float: none;
    overflow: visible !important;
    position: absolute;
    height: auto;
    width: 99%;
    font-size: 12px;
    padding: 20px 0px;
    margin: 10px 0px;
    clear: both;
}

.ncs_content { background: none; border: none; float: none; }

.ncs_stage_content, .ncs_stage { margin: 0; padding: 0; float: none; clear: both; font-size: 12px; }

.ncs_footer { display: none; }

.ncs_footer_printed_date {
    margin: 0px;
    padding: 0px;
    width: 750px;
    font-size: 12px;
    display: block;
}

所以我基本上必须将所有内容封装在#ncs中（就像Lucius所说的那样），然后从那里玩它。我可能会在我的语法笔记网站上发布这个以防万一这个帖子被删除...希望它能帮助其他人努力解决FF打印错误。

感谢大家！欢呼！现在我要告诉我的老板......不是因为他把头撞到我的桌子上，而是关心我花了多长时间或者杀了多少脑细胞...

Answer 4

问题：页脚位置：绝对底部：0px；全部到首页页脚。

为了绕过firefox bug，将.page div 的margin-top 设置为0px 以外的值

.page 是每个真正的 a4 页面都对应于这个类。打印预览中的每个单独页面都需要。

 @media print {
      .page {
          margin-top: 1px;
          top: -1px;
         /* nudge back up to compensate for margin */
     }
   }

完整代码（示例）：

<html><head>
    <style>
@page {
    size: A4 portrait;
    margin: 0;
}
body {
    margin: 0;
    padding: 0;
    font-family: "Verdana", sans-serif;
}
.page {
    position: relative;
    width: 209mm;
    height: 295mm; /* slightly smaller than A4 as there's a bug in Chrome whereby it overflows
                      the physical page otherwise  */
    overflow: hidden;
}
.pagea { background-color: tomato; }
.pageb { background-color: green; }
.content {
  position: absolute;
  top: 100px;
  left: 100px;
  font-size: 36pt;
  color: black;
}
@media print {
    .page {
        /* uncomment these lines and it works... 
        margin-top: 1px;
        top: -1px;
        */
          /* nudge back up to compensate for margin */
    }
     
     /* code below included in his example, but in my case, it creates EXTRA blank pages due to page overflow 1cm   . so  i  disabled this code.   */
   /*
   .page { page-break-before: always;  }
   .page:first-child { page-break-before: avoid; }  
  */

}
    </style>
  </head>
  <body>
    <div class="page pagea">
        <div class="content">Page 1</div>
    </div>
    <div class="page pageb">
        <div class="content">Page 2</div>
    </div>
  

</body></html>

我在这里使用了“david Earl”展示的解决方法

示例：https://bug267029.bmoattachments.org/attachment.cgi?id=8724763

错误帖子：https://bugzilla.mozilla.org/show_bug.cgi?id=267029#c18

页脚未在打印预览中的内容底部对齐

4 个答案: