打印 CSS 不遵守显式高度/溢出:无?

lon*_*oat 5 html css printing overflow

我为我的页面编写了一个单独的 media="print" 样式表 - 专门用于调整 div 的大小。在打印 CSS 中,我为 div 指定了明确的高度(以“pt”为单位)和不同的字体大小(也以“pt”为单位)。我还指定了 div 总是有溢出:隐藏(我想要额外的文本被砍掉)。

当我打印页面时,div 似乎不尊重显式高度 - 它只是拉伸 div(尽管有溢出:隐藏);由于这是一个打印布局,我需要花大量时间对其进行故障排除,因为我无法使用 IE Developer 工具来跟踪 CSS/DOM。

顺便说一句,我使用的是 IE8,页面处于兼容模式。我在一个公司局域网中,所有用户都保证拥有 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>
Run Code Online (Sandbox Code Playgroud)

打印 CSS:

#notes_html, #overview_html { height: 200pt !important; overflow: hidden; font-size: 12pt; }
Run Code Online (Sandbox Code Playgroud)

屏幕截图(先是浏览器,然后是 IE 的“打印预览”):

浏览器截图

打印预览

任何想法发生了什么?是否有任何“问题”来打印布局,您不能使用溢出:隐藏或设置明确的高度?

Kra*_*raz 4

注意有些盲目的回答,因为我看不到你的照片

尝试使用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>
Run Code Online (Sandbox Code Playgroud)