为什么在打印媒体查询中不显示任何内容？

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>