jquery - 如何在使用 JQuery printElement 和 IE8 时从 css 打印轮廓和背景颜色？

Question

在 Chrome 中打印我的 html calendar-table 时，效果很好。

另一方面，在 IE8 中，它不包括背景颜色和图像。我跟着这个helpful post , 以便将其设置为默认的所需选项。

唯一的问题是；它不起作用。完全没有变化。 我知道我的 css 已包含在内，因为它在 Chrome 中都有效，而且因为表格、td 和 tr 边框、宽度、高度、对齐方式、字体和文本颜色都打印正确。但是，轮廓、图像和背景颜色将被忽略。我仔细检查了我在 IE8 设置中的打印机选项是否设置为包括它们，并且我已经多次重新启动浏览器。

编辑:

我刚刚发现我需要在两个地方告诉 IE8 我需要我的颜色等。这是描述第二个的链接:http://support.microsoft.com/kb/974128

但是，它只对我的颜色有效。不是我在单元格之间的轮廓边界...

这是我启动 printElement 的代码。

function printCalendar(){

     $('#printable').printElement({
          overrideElementCSS:['../css/calendarprintstyle.css'],
    printBodyOptions:{ pageTitle:'calendar'}
    }); 
}

#printable 是一个 div，包裹着一个 table。

这是一些示例 CSS，它无法正常工作。 outline 和 background/background-color 不起作用。

table{
    display: table;
    border-collapse: collapse;
    border-spacing: 0px;
    border-color: black;
    table-layout: fixed;
    font-family: arial;
    font-size: 12px;
}

th{

    background-color:blue;
    color:white;
    font-weight: bold;
    outline: 1px solid black;

}

td, tr{
    height: 20px;
    max-height: 20px;
    padding: 0px;

}


.calendar {
    border: 2px solid black;
    table-layout: fixed;
    white-space: nowrap;
    overflow:hidden;    
    float: center;
}

.calendarcell {
    outline: 1px solid black;
    height: 20px;
    white-space: nowrap;
    overflow:hidden;    
    max-height: 20px;
    width: 180px;
    max-width: 180px;
}

.datedatacell {
    outline: 1px solid black;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    border-left: 2px;
    text-align: center;

}

.holidaystyle {
    background-color: #f00;
    color: #fff;
    outline: 1px solid black;
}

.everydaystyle {
    background-color: #fff;
    color: black;
}

Answer 1

大多数浏览器默认情况下不打印背景颜色和图像，但它们通常有一个允许的设置。对于当前的 IE，可以在“页面设置”对话框中找到设置。

IE 似乎也不打印彩色边框。您总是需要预料到浏览器不会(或经常不能)完全按照指定的方式显示某些内容。 IE6无法使用display:table，触摸屏浏览器无法使用:hover，纯文本浏览器无法显示不同字体大小，语音浏览器无法显示颜色，部分浏览器无法打印彩色边框或背景等等。但这就是网络的工作方式，如果您的设计理念需要类似的东西，那么是时候重新考虑您的设计理念了。