Question

我有一个适用于Chrome的打印解决方案，但我在IE11中得到了奇怪的结果。该解决方案涉及缩小网页内容以适应打印页面。

在IE浏览器中，我看到我的内容在页面的一半处被切断了。

我创建了一个简化示例，说明我认为是我的问题的原因，即缩放内容似乎只占用了该页面的百分比。例如。如果我将内容缩放50％（0.5），打印时只占页面空间的一半。如果缩放75％，它占用了大约四分之三的页面空间。示例如下。

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错误，但我设法使用特定的元素层次结构和一些限制来部分破解它。

我可以在打印/打印预览中正确渲染，但前提是内容适合单页。

这需要将缩放元素绝对定位在绝对定位的容器元素内，并且根据容器是否相对于其中的元素（在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的流程中（有一个相对的祖先），它必须从页面顶部开始，没有间隙

这意味着：

没有保证金顶部
如果存在边框，则需要将框大小设置为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中打印时，缩放元素会被切断

1 个答案: