Question

在Windows上的IE8中，有没有办法只使用css（而不是javascript）打印嵌套的“id = printarea”div（带样式）？

<div id="main">
    This should NOT be shown in Print Preview
    <div id="printarea">ONLY this should be shown in Print Preview
    <table><tr><th>one</th><th>one</th></tr><tr><td>one</td><td>one</td></tr></table></div>
</div>

我尝试过使用css，但由于继承，它显然没有显示任何内容。以下示例显示了我的意图。

@media print {
    * { display:none; }
    #printarea { display:block; }
}

我已成功使用javascript（有效），但我不认为它是一个优雅的解决方案，因为我必须在document.write中提取所有css导入和样式块。

function printDiv(divId){
    var divToPrint = document.getElementById(divId);
    newWin= window.open();
    newWin.document.write('<style>table,tr,td,th{border-collapse:collapse;border:1px solid black;}</style>');
    newWin.document.write(divToPrint.innerHTML);
    newWin.document.close();
    newWin.focus();
    newWin.print();
    newWin.close();
}

示例： http://jsfiddle.net/D7ZWh/2/

相关： Overriding parent's CSS display property

Answer 1

您必须将所有其他内容放入html元素（请注意p标记）

<body>
  <p>This should NOT be shown in Print Preview</p>
  <div id="main">
   <p>This should NOT be shown in Print Preview</p>
   <div id="printarea">ONLY this should be shown in Print Preview</div>
  </div>
</body>

然后，您可以隐藏父母下方的所有其他元素。为层次结构中的每个父项执行此操作

@media print {
   body *, #main * { display:none; }
   #main, #main #printarea, #main #printarea * { display:block; }
}

编辑：

这与printing only one div

的第二个答案非常相似

Answer 2

如果您可以更改标记，那么显然最好的办法就是将您想要隐藏的内容包装在自己的标记中，然后隐藏它们。但是，如果你真的只想使用CSS而不修改DOM，那么你可以通过定位来玩一些技巧。尝试这样的事情：

@media print {
   #main {position:relative; padding:0; height:1px; overflow:visible;}
   #printarea {position:absolute; width:100%; top:0; padding:0; margin:-1px;}
}

这将基本上折叠#main div，并将#printarea置于其顶部，以便涵盖所有内容。（我添加了margin:-1px，以便它也涵盖#main的边框。只需确保#printarea有背景，你应该好好去。

尝试从这个小提琴打印显示框：http://jsfiddle.net/D7ZWh/3/以查看结果。

Answer 3

你想做什么的问题我试图隐藏父母，并向孩子展示。如果您可以将该文本包装在段落或跨度中，那么您可以执行类似

的操作

#main * {display:none;}
#main #printarea {display:block;}

所以，基本上你把所有#main的孩子都隐藏起来，然后隐藏它们，然后只显示打印区域。

将打印区域限制为div

3 个答案: