css - page-break-inside 被忽略

Question

我正在从另一个页面动态添加 HTML 并为其设置打印样式。然而，page-break-inside: avoid;，当应用于我的元素(其中任何一个)时，即使它出现在样式中，打印时似乎也没有被考虑在内。我在 Windows 上使用 Chrome 31

Here is a jsFiddle我程序的简化版本(警告:它会在 3 秒后显示打印预览。要停止此操作，只需注释掉底部的 setInterval)，这是page-break-inside:avoid 对打印预览没有任何影响

我发现通常的“修复”，将 position:relative 添加到元素及其父元素，在我的情况下不起作用。给它加上前缀(正如几个人所建议的)似乎也不起作用

我知道 page-break-inside: avoid; 在 Chrome 31 中使用动态放置的元素工作，因为我 tested it out in a pseudo-version (警告:这也会打开打印预览)，但是在花了几个小时删除代码、尝试样式和研究主题之后(大多数帖子都非常过时)我似乎无法让我的更复杂的版本以同样的方式工作

提前感谢您的任何见解!

Answer 1

将您的#fromTumblr ID 的显示属性从inline-block 更改为block。

分页符规则不适用于内联元素似乎是合乎逻辑的，并且由于该 ID 用于超出页面大小的包装元素，我想这就是您忽略所有其他规则的原因。

这是更新的 fiddle ，在 Windows 上的 Chrome 31 和 FF26 上测试过:http://jsfiddle.net/FSyT5/27/