在 IE11 中打印时缩放元素被截断
Scaled element gets cut off when printing in IE11
我有一个在 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 大师可以对此有所启发?
我仍然相信这是一个 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
对于为什么这种神奇的组合使其能够正确呈现,我没有深入的答案,但希望这会对某人有所帮助。如果您对正在发生的事情有任何见解,请发表评论。
我有一个在 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 大师可以对此有所启发?
我仍然相信这是一个 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
对于为什么这种神奇的组合使其能够正确呈现,我没有深入的答案,但希望这会对某人有所帮助。如果您对正在发生的事情有任何见解,请发表评论。