Twitter bootstrap 在Firefox中打印引导页面

我有一个基于这个模板制作的index.html：有一些小改动（在我的例子中，我使用了navbar fixed top，并在sb-admin-2.css中将.sidebar位置改为fixed）

此索引是静态的，例如，仅通过单击事件更改节内容

（index.html的一部分）

系统用户指南
切换导航






家
欢迎使用我们的用户指南

函数openPage（第页）{
$（“#内容”）。加载（第页）；
}

（loginwelcome.html）

登录&欢迎

登录和欢迎




试验

所以，问题是：当我尝试在Chrome或IE中打印loginwelcome.html时，它工作得非常好（将content div width扩展到100%，隐藏侧边栏等）。但当我尝试在Firefox中打印这篇文章时，会有一个巨大的左边距。我尝试使用bootstrap print响应类进行一些更改，并在css中修改media@print，但这几乎就像firefox根本无法识别media@print中的更改一样。我还尝试了print_printer reset（在about:config中）并在本节中更改了一些打印参数，但一旦更改了打印机，问题又出现了。 此外，我希望有更好的方法来做这件事，或者我只是在代码中做了一些错误的事情，因为要求用户做所有这些“变通”是很困难的

---

（很抱歉有任何错误/错误的解释，这是我第一次在这里问问题）

听起来你可能尝试过类似的方法，但下面的方法对我有用。顺便说一句，我用的是bootstrap

确保要打印的DOM元素具有“可打印”类

在css中，确保您具有：

@media print {
  html, body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  .printable {
    position: absolute;
    left: 0;
    top: -13%;
    width: 100%;
   }
  // Firefox-specific print styling:
  @supports (-moz-appearance:meterbar) {
    .printable {
      left     : -50%;
      width    : 200%;
      font-size: 0.85em;
    }   
  }
}

---

试一试。

遇到了同样的问题（在Firefox中打印，有一个巨大的左边距）；前面的答案帮助很大。但是，我必须将样式设置为container类，以确保一切正常（引导）。因此，识别正确的div并设置特定于浏览器的样式应该可以很好地工作

@@supports (-moz-appearance:meterbar) {
  .container {
    margin: 0;
    font-size: 0.90em;
    width: 100%;
  }
}

@media print {
  html, body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  .printable {
    position: absolute;
    left: 0;
    top: -13%;
    width: 100%;
   }
  // Firefox-specific print styling:
  @supports (-moz-appearance:meterbar) {
    .printable {
      left     : -50%;
      width    : 200%;
      font-size: 0.85em;
    }   
  }
}

@@supports (-moz-appearance:meterbar) {
  .container {
    margin: 0;
    font-size: 0.90em;
    width: 100%;
  }
}