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>

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

1 个答案: