Jos*_*iah 5 html css printing css3
上下文:使可打印的发票在浏览器中生成.
在制作可打印的网页时,通常会使用@media print规则来更改内容查找打印页面的方式.理想情况下,因为我只打印页面的一小部分,所以我想隐藏所有内容然后显示特定元素的内容.
结构是这样的:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
理想情况下,我想做点什么
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
但这不起作用,因为有些元素需要内联,有些需要阻塞.我已经display从MDN中使用了一些不同的值,但找不到一个可以轻松将值重置为原始值的值.display: initial好像被对待了inline.
CSS中的建议:"display:auto;"？似乎只适用于JS.
当然,有可能明确地"隐藏"我不想要打印的东西,而不是显示我想要的东西,但在我看来应该可以走另一条路.
在这个问题中如何只显示CSS的某些部分用于打印？建议body *:not(.printable *) {display:none;}但注意(在w3否定页面上备份),这还不支持.
我注意到w3草案和显示外部页面似乎建议使用未知(to webkit)box-suppress属性来保留显示值而不显示元素.
什么是隐藏所有内容并定位某些元素的最佳方式,当它们不共享显示属性时？
到底是box-suppress做什么的？
由于您专门标记了此CSS3,请尝试使用CSS3!
body>:not(.printing) {
display: none;
}
这应该适用于您给出的示例.我希望它适用于您的实际应用程序!
为了回答你的辅助问题,截至2014年10月,box-suppress可能是将来的替代品display:none,希望能够更容易地隐藏和删除流程中的元素,而不必担心改变其显示类型(相反visibility仍然保持在流程中,并且position:absolute仍然保持可见).我认为它目前不受支持,所以我现在暂时离开它.如果您想了解更多信息,请访问http://w3.org/TR/css-display
| 归档时间： |
|
| 查看次数： |
2993 次 |
| 最近记录： |