在 chrome 中打印预览后管理图像的 css 样式

Posted

技术标签:

【中文标题】在 chrome 中打印预览后管理图像的 css 样式【英文标题】:manage the css style for image after print preview in chrome 【发布时间】:2013-11-18 19:18:39 【问题描述】:

我有一个 html 页面,其中有图像、文本和两个按钮

1.print page用于打印页面

2.隐藏/显示(切换按钮)用于隐藏/显示图像下方。

页面中的图像是使用远程服务动态生成的。

在谷歌浏览器中 当我单击隐藏/显示按钮隐藏图像并单击打印按钮时,打印预览页面出现在同一页面上。 然后我取消打印页面并返回页面。 然后我再次单击隐藏/显示按钮以显示图像

这里的问题是页面上没有显示图像。

使用 firebuglite 我发现内联 css 样式(如图像的宽度和高度)为 0,因此图像未显示在页面上。 如何在打印预览后管理图像的 css 样式,此问题仅在 Chrome 中出现。 请帮忙。

【问题讨论】:

【参考方案1】:

这是使用 javascript 的 CSS 浏览器选择器: http://rafael.adm.br/css_browser_selector/ 你可以使用它,然后添加类:

.chrome #btn
height:30px !important;
width:100px !important;

【讨论】:

以上是关于在 chrome 中打印预览后管理图像的 css 样式的主要内容,如果未能解决你的问题,请参考以下文章

强制浏览器在 chrome、firefox 上打印背景图像

CSS:从打印预览 Chrome 中禁用页眉和页脚

CSS 打印预览 - 显示图像/链接 URL

Google Chrome 上的打印预览行为不同

如果Chrome打印预览到达页面的下边距,则会在中间切断文本

Chrome 打印预览与 DEVTools 中的不同