Question

我有一些非常简单的HTML：

<div id="advisor">
    <div id="print_this_container">
        <form>
            <input type="button" value=" Print this page "
                onclick="window.print();return false;" />
        </form>
    </div>
    <div id="top_section">
        <div class="left_box" style="position: relative;">
            <div id="avatar_container">
                <img class="avatar" src="<%= @advisor.avatar_url %>" />
            </div>
        </div>
        <div class="right_box">
            <h2><strong>Council on Emerging Markets</strong></h2>
        </div>
    </div>

</div>

关联的CSS是：

#advisor{
    width: 800px;
}
#top_section{
    border-bottom: 1px solid #666 !important; 
    height: 200px;
}
.right_box{
    float: left; 
    padding-left: 25px; 
    padding-top: 50px; 
    width: 550px;
}
.left_box{
    background: #ccc; 
    width: 200px; 
    float: left; 
    text-align: center; 
    height: 100%;
}
img.avatar{
    width: 150px;
}

在我的print.css中

#advisor{
    width: auto;
    }
#print_this_container{
    display: none;
    }

在我的网页上看起来很棒。但是，当我打印它时会出现以下问题：

顶部边框消失
图像缩小
右侧框显示在左框，它不浮动
左框背景颜色消失

有谁知道如何解决这些问题？

Answer 1

在浏览器中打印时存在许多问题。很多特定于打印的东西在大多数浏览器上都不起作用，即使它被多个浏览器支持，它的处理方式也不同

我们已经花了两周时间尝试使用浏览器打印标签 - 最后，我们已经选择了尽可能优雅地失败的多种解决方案......

首先，我们检测silverlight和flash - 如果存在，我们使用它们进行打印。

接下来，我们有一段代码在服务器的内存中加载Web浏览器，并在特定的URL上截取页面的截图 - 这会生成一个图像，然后我们返回到客户端进行打印。这对我们的场景是可以的，但您可能想要检查内存使用情况等。适用于大量网站。

我们发现的一些事情：页边距是一种真正的痛苦（特别是对于标签！）。似乎只有某些版本的Opera允许您修改CSS的页边距

背景图像和颜色通常不会被浏览器打印（以节省墨水） - 大多数浏览器都有一个选项可以打印BG。

在firefox中查看about：config

print.printer_<PrinterName>.print_bgcolor
print.printer_<PrinterName>.print_bgimages

在IE中，我认为它位于File-＆gt; Page Setup ...

之下

显然，这些都不能帮助你，因为它们不能被网站本身设置 - 这取决于用户是否可以有意识地设置这个设置。如果不这样做，您可以尝试使用放在内容后面的普通非背景图片吗？

根据我的经验，浮动不适用于打印 - 但是，我已经尝试了一段时间，只要您为页面提供明确的宽度（100％？），现在可能会有效，我认为大多数浏览器在打印媒体上使用缩小到适合作为默认值。

页面宽度是另一个有趣的 - 我只发现非常有限的“宽度”属性似乎有用 - 有一点我差点使用表格。到目前为止，百分比似乎工作正常，而汽车却没有。

尝试查看Here和Here获取某些解决方案，Here查看浏览器兼容性图表

如何解决打印非常基本的HTML的一些问题

1 个答案: