我已经为我的页面编写了一个单独的 media="print"样式表 - 专门用于调整 div 的大小。在打印 CSS 中，我为 div 指定了明确的高度(以“pt”为单位)和不同的字体大小(也以“pt”为单位)。我还指定了 div 总是有 overflow: hidden(我希望额外的文本被砍掉)。
当我打印页面时，div 似乎不遵守显式高度 - 它只是拉伸(stretch) div(尽管有溢出:隐藏)；由于这是一个打印布局，我无法使用 IE Developer 工具来跟踪 CSS/DOM，因此我很难对其进行故障排除。
顺便说一句，我使用的是 IE8，页面处于兼容模式。我在公司 LAN 中，所有用户都保证拥有 IE7 或 IE8，所以我实际上只需要它在那些环境中工作；
HTML:
<div class="left" style="display: none;">
<h1 class="corrected">Company Info</h1>
<div class="box" id="overview_html"></div>
</div>
<div class="right" style="display: none;">
<h1 class="corrected">Notes</h1>
<div class="box" id="notes_html"></div>
</div>
打印 CSS:
#notes_html, #overview_html { height: 200pt !important; overflow: hidden; font-size: 12pt; }
屏幕截图(首先是浏览器，然后是 IE 的“打印预览”):
有什么想法吗？在不能使用 overflow: hidden 或设置显式高度的地方是否存在打印布局的“问题”？
最佳答案
注意:有点盲目回答，因为我看不到你的照片。
尝试使用 max-height 而不是 height。这对我有用。
编辑
问题是兼容模式:它的行为类似于 IE6:高度被视为最小高度(即“可以变大”)。
完整测试用例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>test</title>
<style type="text/css" media="screen">
div {
border: 1px solid red; overflow:hidden;
float:left;
width:100%;
height:50pt
}
</style>
<style type="text/css" media="print">
div {
border: 1px solid blue; overflow:hidden;
float:left;
width:100%;
height: 50pt
}
</style>
</head>
<body>
<div>
test<br />test<br />test<br />test<br />test<br />test<br />test<br />
test<br />test<br />test<br />test<br />test<br />test<br />test<br />
</div>
</body></html>
关于css - 打印不符合显式高度/溢出的 CSS : none?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6914786/