更改用于打印的CSS页边距

我们有一个带有page-wrapper id的元素。我已经测试，改变这一内容的利润率呢，其实，除去实际页面边距：更改用于打印的CSS页边距

@media (min-width: 768px) { 
    #page-wrapper { 
     position: inherit; 
     margin: 0 0 0 220px; 
    } 
}

我的目标是保持利润率为标准页，但打印时将其删除，所以我尝试这样：

@media print 
{ 
    #page-wrapper 
    { 
     margin: 0px !important; 
     /*display: none !important;*/ 
    } 
}

的display:none评论存在只是为了证明确实如此，事实上，隐藏打印的元素，它在那里我测试的一部分。然而，保证金不会像它应该改变。

我对我可能做错的想法不甚了解，所以我希望有人有一个想法。我们在页面上没有其他@media print样式，但确实有其他@media min-width styles，但据我所知#page-wrapper应覆盖它们全部用于打印。

任何想法？

编辑：设置background-color:red;似乎不工作，只有隐藏元素从视图display: none作品。

编辑2：我不设置@media print在样式表中绝对最后，而不是它应该的问题，因为它是唯一的打印样式，并使用!important，但还是值得一提的一件事核对。

编辑3：检查元素时，唯一应用的边距样式是第一个代码段中显示的样式。在检查元素时，@media print样式完全不显示。

来源

2015-11-03 VSO

听起来像你可能有一个保证金应用比'＃page-wrapper'计算的'（0,1,0,0）'具有更大的特异性，它也具有'！important;'。请参阅[this]（http://vanseodesign.com/css/css-specificity-inheritance-cascaade/）以获取更多参考。尝试打开开发工具（大多数浏览器中的''）并选择元素以查看样式细分。寻找可能更具体的包含'！important;'标签的应用样式。如果您需要帮助计算特异性，请尝试[this]（http://specificity.keegan.st/）资源。 – War10ck

谢谢，我只是通过了，我没有看到任何设置页面包装器上重要的边距宽度。这是一个预制的样式表，所以有大约200个标记为“！important”的东西 - 在我仔细检查所有建议之后会更新，ty。 – VSO

您是否在您的主要CSS链接上放置了媒体属性？例如，如果你要用'media =“screen”包含你的主CSS文件，那么打印样式可能不起作用。 – MikeZ

当我需要解决类似问题时，我首先创建了页面部分的PDF，然后如果需要我可以打印它，或者我可以通过电子邮件将其打印出来。要调整PDF的页边距，您可以使用@page选择器。所以，我的嵌入式CSS将是：

@page{margin:120px 50px 80px 50px;}

它可能或因为我还没有从页面试图直接打印可能无法正常工作，但可能提供相同的最终目标的另一个途径。

来源

2015-11-03 20:03:46 Michael

更改用于打印的CSS页边距

回答

相关问题