[CSS] overflow 导致网页打印时候错误分页.

最近做一个问答试卷的东西. 在页面上选择问题库里的问题, 然后罗列在页面上, 放在 UL/LI 里就自动生成题号并生成缩进, 页面顶端加点标题啥的, 然后打印页面 (Ctrl + P) 即可. 本来一个很简单的功能, 到功能快做完的时候却发现了一个棘手的问题:

如果题目(LI标签)太多或者其中某些LI内容太高, 就会有分页的问题. 如果说正常的分页还好, 可是不知为何, 页面中的题目区域竟然整体被分到第二页去了! 首页只留下一个标题, 下面是一大片的空白.

代码类似于这样(除了floatLeft写有一行靠左浮动以外其他 class 只是用来解释这是干嘛用的, 没内容):

 

<div style="....">
 标题标题标题标题标题标题标题标题
 <br />
 标题标题标题标题标题标题标题标题
 <br />
 标题标题标题标题标题标题标题标题
 <br />
 标题标题标题标题标题标题标题标题
 <br />
 标题标题标题标题标题标题标题标题
 <br />
</div>
<div class="allQuestions">
 <ul>
  <li>
   <div class="question">
    <div class="questionBody">
     张三的性别是
    </div>
    <div class="questionAnswers">
     <div class="floatLeft">
      A: 男
     </div>
     <div class="floatLeft">
      B: 女
     </div>
     <div class="floatLeft">
      C: 秀吉
     </div>
    </div>
   </div>
  </li>
  <li>
   <!-- question -->
  </li>
  <!-- other questions-->
 </ul>
</div>

 

---------------------------------------
看起来很普通的一段代码, 为什么会导致如此显示效果? 不解. page-break-before 和 page-break-after 都试了, 无效. 度娘忙着吞贴没工夫理我. 通过上色法发现被挤到第二页的竟然是 allQuestions 下面的那个 UL. 这让我更迷惑了. 后从Google上搜索到一篇文章, 提到了这个问题:
http://www.appnovation.com/how_avoid_your_web_printing_page_being_cut
(How to avoid your web printing page being cut off)

里面有段话引起了我的注意:
......Third, if overflow element is set to 'hidden' in your style.css, it may cause your text to get cut off as well. In print.css, set “overflow: visible” instead of “overflow: auto” or “overflow: hidden” on div. The definition of overflow auto is: “If overflow is clipped, a scroll-bar should be added to see the rest of the content” —but scroll bars don't exist on printed pages......

译:
第三，如果一个元素在你的 style.css 中 被设置了"overflow:hidden", 有可能导致你的文本内容被切断. 应在 print.css 中为 DIV 标签设置 "overflow: visible" 而不是 "auto" 或者 "hidden". "overflow" 的定义是: "如果溢出的内容被裁剪, 应显示滚动条以显示其余的内容" —— 但是在纸上是没有滚动条的......
---------------------------------------

呵呵, 突然想起来, 正常情况下 元素的 overflow 是 auto. 那么好办了, 把 CSS 类 allQuestions 给设置成 overflow: visible. 刷新, 问题解决了.

可是依然还有不明白的地方:
为何只有 UL 才有这个问题? DIV却没有?
Html List 控件的打印行为逻辑到底是怎样的?

这两个问题还得继续细细研究.