為什么在打印媒體查詢中不顯示任何內容？

Question

我有一個需要打印的網站，沒有可見的任何頁眉，頁腳或背景。 對於頁腳和容器背景，這很好用，但是我無法弄清楚如何隱藏頁眉容器。

我的HTML：

<div id=header>
    <div id=logoContainer>
          <a href="mainPage.php"><img id=logo src="xxx.png"></img></a>
      <div id=pageTitle>
        <h1 id=pageTitleText>TITLE</h1>
      </div>
      <div id=headerUserInfo>
        <span>Logged in as: <?php echo $_SESSION['login_user']; ?> | </span><a class=logout href="logout.php">Logout</a>
      </div>
    </div>
  </div>

CSS：

#header {
height:90px;
background:url("images/header.png") repeat-x scroll 0 0 #2d3133;}

@media print {
      #header {
        display: none !important;
      }
}

當打開Chrome檢查器並選擇標題容器時，@ media打印規則根本不會出現。 （渲染設置為在Chrome中模擬打印。）頁腳和其他容器可以正常工作，僅是頁眉即可。

我在這里想念什么？

編輯：一個工作示例：

HTML：

<div id="tableContainer">

  <div class="buttonsDiv">
    <a href="new.php" class="mainButton">Button 1</a>
    <a class="mainButton">Button 2</a>
    <a class="mainButton">Button 3/a>
  </div>
</div>

CSS：

@media print {
      #header {
        display: none !important;
      }
      #footer {
        display: none;
      }
      #tableContainer {
        background: transparent !important;
      }

Answer 1

在定義ID <div id="header">使用"

 #header { height:90px; background:url("images/header.png") repeat-x scroll 0 0 #2d3133;} @media print { #header { display: none !important; } } 

 <div id="header"> <div id=logoContainer> <a href="mainPage.php"><img id=logo src="xxx.png"></img></a> <div id=pageTitle> <h1 id=pageTitleText>TITLE</h1> </div> <div id=headerUserInfo> <span>Logged in as: <?php echo $_SESSION['login_user']; ?> | </span><a class=logout href="logout.php">Logout</a> </div> </div> </div>