page-break-inside被忽略 [英] page-break-inside being ignored

问题描述

我从另一个页面动态添加HTML并为其打印样式。然而，当应用于我的元素（它们中的任何一个）时， page-break-inside：avoid; 在打印时似乎不被考虑，即使它显示在样式中。我在Windows上使用Chrome 31

这是我的程序的简化版本（ WARNING ）的jsFiddle ：它在3秒后显示打印预览，要停止此操作，只需将 setInterval ），这是 page-break-inside：avoid 在打印预览中没有任何作用的版本

我发现的通常的修复，为元素及其父元素添加 position：relative 不适合我的情况。前缀（作为一对夫妇建议）似乎也不工作

我知道 page-break-inside：avoid; 在Chrome 31可与动态放置元件，因为我的在一个伪测试了它版本 （警告：这也打开了打印预览），但花费数小时后删除代码，玩弄风格和研究主题（大多数帖子是非常过时）我似乎无法让我的复杂版本以同样的方式工作

感谢任何见解！

inline-block 更改为 block code>。

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

这里更新的小提琴在Windows的Chrome 31和FF26上测试过： http://jsfiddle.net/FSyT5/27/

I am dynamically adding HTML from another page and styling it for print. However, page-break-inside: avoid;, when applied to my elements (any of them), does not seem to be taken into account when printing even though it shows up in the styles. I am using Chrome 31 on Windows

Here is a jsFiddle of the simplified version of my program (WARNING: It brings up the print preview after 3 seconds. To stop this simply comment out the setInterval at the bottom), This is the version where page-break-inside:avoid doesn't have any effect in print preview

The usual "fix" I've found, adding position:relative to the element and its parent, does not work in my case. Prefixing it (as a couple people suggested) doesn't seem to work either

I know page-break-inside: avoid; works in Chrome 31 with dynamically placed elements because I tested it out in a pseudo-version (WARNING: this also opens up print preview), but after spending hours removing code, playing around with the styles, and researching on the topic (most the posts are very outdated) I couldn't seem to get my more complex version working the same way

Thanks in advance for any insight!

解决方案

Change display property on your #fromTumblr ID from inline-block to block.

It seems logical that page break rules don't apply on inline elements and since that ID is for wrapper element that exceeds page size I guess thats the reason all your other rules are ignored.

Here's updated fiddle, tested on Chrome 31 and FF26 on Windows: http://jsfiddle.net/FSyT5/27/

这篇关于page-break-inside被忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！