打印 HTML 页面时，Letter 纸不适合打印

问题描述 投票：0回答：1

我正在处理一个大型项目，其中一部分是打印 HTML 页面。

但是，我们正在处理页面不适合 Letter 尺寸纸张的问题。

请看下面的简单代码： 如您所见，Letter 纸张的尺寸已明确指定。该页面在 Web 浏览器上正确显示，甚至在“打印预览”页面上也能正确显示。然而，在美国信纸尺寸的纸张上打印后，“测试”一词在顶部和左侧被切掉了一点。为什么会出现这种情况？

见下图：

<style>
/* Reset default margin and padding on body */

@page {
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
}

/* Create a full-screen div */
.full-screen-div {
    width: 8.5in; /* 100% of the viewport width */
    height: 11in; /* 100% of the viewport height */
    Border: solid 5px
    }

.TR{
position:absolute;
margin-top:0;
margin-right:0;
font-size:24px;
}

</style>
<!DOCTYPE html>
<html lang="en">
<head>

    
    <title>Full-Screen Div</title>
</head>
<body>
    <div class="full-screen-div">
        <!-- Content goes here -->
        <span class='TR'>Test</span>
    </div>
</body>
</html>

html css-position css-print
1个回答
0
投票

该跨度是绝对定位的，它具有默认位置

top: 0
和
left: 0
，但没有父/祖先div具有
position: relative
，因此
body
默认被视为相对父级。

我建议将 

position: relative
添加到 
full-screen-div
中，使其充当 
.TR
绝对位置的位置锚，这样可以更好地控制其位置。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.