响应式网站空白打印预览

Question

我已尽我所能使我们的响应式网站 http://www.usalight.com 打印出来。我已经尝试将 @media 查询添加到我们的样式表中，如下所示：

@media print {
  * { 
    text-shadow: none !important;
    color: #000 !important; 
    background: transparent !important;
    box-shadow: none !important;
  }
}

我试过在我们的 header 中添加单独的 print.css 样式表链接，如下所示：

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

我也已将 media="print,screen" 添加到我们所有的样式表中，但无济于事。我不明白为什么我无法在打印预览中显示任何内容。想法？

Answer 1

这似乎与您的几乎所有页面都在 .navbar-default div 中有关。在您的 #main-body id 之前添加结束 div 标记允许打印大部分页面。