css - 响应式网站空白打印预览

Question

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

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

我尝试添加一个单独的 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 标记允许打印大部分页面。