Question

我为我的页面编写了一个单独的media =“print”样式表 - 专门用于调整div的大小。在打印CSS中，我给div一个明确的高度（以'pt'为单位）和不同的字体大小（也在'pt'中）。我还指定div总是有溢出：隐藏（我想要额外的文本来切断）。

当我打印页面时，div似乎不尊重显式高度 - 它只是拉伸div（尽管有溢出：隐藏）;由于这是一个打印布局，因此我无法使用IE Developer工具跟踪CSS / DOM，因此我有一个heckuva时间进行故障排除。

BTW，我正在使用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>

打印CSS：

#notes_html, #overview_html { height: 200pt !important; overflow: hidden; font-size: 12pt; }

屏幕截图（首先是浏览器，然后是IE的“打印预览”）：

Browser screenshot

Print-preview

任何想法发生了什么？是否有任何“陷阱”打印布局，你不能使用溢出：隐藏或设置一个明确的高度？

Answer 1

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

尝试使用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不尊重显式高度/溢出：无？

1 个答案:

修改