2

我正在使用基于 SVG 的图表制作仪表板。当我打印页面时，图表会四处移动以防止在其中发生分页符。这是不可取的，并且会破坏我的布局，但我无法弄清楚是什么原因造成的。

例子：

  1. 普朗克
  2. 弹出预览
  3. 打印（只看预览，实际上不必打印）

结果：每页 2 个完整的框，边距不均匀

预期：每页 2.5 个盒子，边距均匀

任何帮助将不胜感激

编辑：这是我正在谈论的画廊。显然这个问题不会影响所有浏览器/操作系统？

4

2 回答 2

6

这是不可能的。

根据http://www.w3.org/TR/CSS2/page.html#allowed-page-breaks，这些是元素可以在页面之间中断的唯一情况：

在正常流程中，分页符可能出现在以下位置：

  1. 在块级框之间的垂直边距中。当此处发生非强制分页时，相关“margin-top”和“margin-bottom”属性的使用值设置为“0”。当此处发生强制分页时，相关'margin-bottom'属性的使用值设置为'0'；相关的“margin-top”使用值可以设置为“0”或保留。
  2. 在块容器框内的行框之间。
  3. 如果块容器框的内容边缘与其子内容的外边缘（块级子项的边距边缘或内联级子项的线框边缘）之间存在（非零）间隙。

你想要（2），你得到（1）。

问题是<svg>元素被替换了内容。

根据http://www.w3.org/TR/CSS2/visuren.html#block-boxes，被替换的元素不是块容器框：

除了后面章节介绍的表格盒和替换元素外，块级盒也是块容器盒。

这意味着<svg>不满足（2），所以你不能得到你想要的。

于 2014-05-09T20:05:22.117 回答
0

我通过应用于position: absolute父容器来解决它。

于 2015-07-28T05:24:38.063 回答