标签: print-style

在编写打印样式表时,有没有办法确保图像始终只在一个页面上,而不是跨越多个页面.图像比页面小得多,但根据文档流程,它们最终位于页面底部并被分割.我所看到的行为的一个例子如下:

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |  ________________  |
       | | Top of image   | |
       |____________________|
       ------page break------
        ____________________
Page 2 | | Rest of image  | |
       | |________________| |
       |         …          |

我想要什么

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |                    |
       |                    |
       |____________________|
       ------page break------
        ____________________
Page 2 |  ________________  |
       | | Full image     | |
       | | …

我有一个包含2个样式表的网页:

<link rel="stylesheet" href="/assets/css/screen.css" type="text/css" media="all" />
<link rel="stylesheet" href="/assets/css/print.css" type="text/css" media="print" />

打印样式与chrome,safari,firefox和IE9完全兼容,但在IE7和IE8中完全中断.某些应隐藏的图像不是,其他应该可见的图像则不是.它看起来像一团糟,尽管如果我在IE7和IE8中为屏幕加载两个样式表,一切看起来都和我期望的完全一样.

我很遗憾无法链接到该页面,因为它是一个正在进行中的客户端站点,但如果有人有任何想法,我会抓住这里的稻草.

我有一个网络表单，我的客户希望用户能够打印出来。使用 CSS 进行一些样式设置时效果很好，但是，我有几个textaear字段。如果用户键入的内容超过 textarea 的高度，则打印时该类型将被截断。

我已经在打印样式表中尝试过textarea{height:100%;}，textarea{height:auto;}但这些都不起作用。

有没有办法将 textarea 字段的大小调整为仅打印版本的文本大小？如果可能，我更喜欢 CSS 解决方案，我可以将其插入到我的打印样式表中。如果这是不可能的，javascript 解决方案将起作用。

截图对比：

注意：如果我不能只影响打印版本，我可以考虑使用 JS 在有人输入时自动调整 textarea 字段的大小。

正如您在此处看到的,开发人员工具栏已从最新版本的Firefox中删除,因此我无法再运行"media emulate print"命令.我宁愿不必使用Chrome来调试我的打印样式,那么还有其他方法可以在Firefox中启用该功能吗？

编辑:Web Developer扩展不是一个选项,因为它只适用于<link>具有media="print"属性的标记- 而不是普通CSS文件中包含的打印媒体查询.

在任何人将此标记为重复之前: 我已经看到了这个问题(这不适用于当前的Developer Edition)和这个问题(它告诉我如何在Chrome中执行此操作).除了发布一个新问题之外,我没有足够的代表去做任何其他事情.