在 IE11 中打印时缩放元素被截断

Question

我有一个在 Chrome 中运行良好的打印解决方案，但我在 IE11 中得到奇怪的结果。解决方案包括缩小网页内容以适应打印页面。

在 IE 中，我发现我的内容在页面的一半左右被截断了。

我创建了一个我认为是问题原因的简化示例，即缩放后的内容似乎只占了页面的那个百分比。例如。如果我将内容缩放 50% (0.5)，打印时它只占页面的一半 space。如果按 75% 缩放，它将占据页面的四分之三 space。示例如下。

HTML结构

<body>
    <div class="content">
        ... content goes here ...
    </div>
</body>

CSS

    .content {
        transform: scale(0.5);
        transform-origin: left top;
    }

这是您可以实际看到的托管版本，带有用于调试的边框：https://neisha.github.io/ieprintingissue/

Image of the behaviour in IE

我尝试了 css 的各种不同排列来让它工作，但我不知所措。另外我不确定这是 IE 中的错误还是预期的行为。我无法想象谁会想要这种行为。有没有 css 大师可以对此有所启发？

Answer 1

我仍然相信这是一个 IE 错误，但我已经设法使用特定的元素层次结构和一些限制来部分破解它。

我可以让它在 print/print 预览中正确呈现，但前提是内容适合单个页面。

这需要将缩放元素绝对定位在绝对定位的容器元素中，并且根据容器是否相对于其祖先元素（在 DOM 的流中）的元素进行不同的行为，或者容器元素是否完全在 DOM 的流之外。

我将使用下面的示例解释这些限制中的每一个：

HTML结构

<body>
    <div class="relativeAncestor">
        <div class="container">
            <div class="content">
                ... content goes here ...
            </div>
        </div>
    </div>
</body>

不允许内容跨越多个页面

绝对定位容器及其祖先也不得跨越多个页面。即它们不能超过视图高度。

实施限制 1

的示例 CSS

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    overflow: hidden;
}

绝对定位的父级在 DOM 的流之外，因此它没有祖先

实施限制 1 和 2 的示例 CSS

// html, body and .relativeAncestor will have position: static by default

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    overflow: hidden;
}

.content {
    position: absolute;

    transform: scale(0.5);
    transform-origin: left top;
}

如果它在 DOM 的流内（有一个相对的祖先），它必须从页面顶部开始，没有间隙

这意味着：

顶部无边距
如果存在边框，则需要将 box-sizing 设置为 border-box
填充可以

实施限制 1 和 3 的示例 CSS

html, body {
    width: 100%;
    height: 100%;
}

body {
    margin-top: 0;
}

.relativeAncestor {
    position: relative;

    width: 100%;
    height: 100%;
}    

.container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    overflow: hidden;
}

.content {
    position: absolute;

    transform: scale(0.5);
    transform-origin: left top;
}

情况2和3，绝对定位容器上的边距是可以的。

这适用于我将视口缩放到单个页面的部分用例。当我必须缩放并让它跨越多个页面时，我仍然遇到麻烦。

这是部分解决方法的托管版本，您可以在实际中看到：https://neisha.github.io/ieprintingissue/workaround.html

Image of the expected behaviour

对于为什么这种神奇的组合使其能够正确呈现，我没有深入的答案，但希望这会对某人有所帮助。如果您对正在发生的事情有任何见解，请发表评论。

在 IE11 中打印时缩放元素被截断

Scaled element gets cut off when printing in IE11

css

printing

internet-explorer-11

scaletransform