Html 在chrome和safari上打印宽度不同

我正在模式视图上实现一个报表查看器。 以下是一些打印样式：

@page{
   margin: 5mm;
}

body{
   visibility: hidden;
}
.modal-report{
   width: 100%;
   height: 100%;
   margin: 0;
}
#report-view-container-id, #report-view-container-id *{
   visibility: visible;
}
#report-view-container-id{
   width: 100%;
   height: 100%;
   position: absolute;
   top:0;
   left: 0;
}

.report-view-container-letter
{
   max-width: 23.59cm;
   max-height: 27.94cm;
   min-width: 23.59cm;
   min-height: 27.94cm;
   padding-right: 15px; 
   padding-left: 15px;
}

在firefox上，当我尝试打印作品时，宽度非常完美，但在google chrome和safari上，宽度约为60%。 6年前已经有一个问题，但没有说什么

在firefox上：

在google chrome和safari上：

---

这是一个小尝试重新创建我的案例

这还不是一个答案，但一个评论不会让我包括我需要的格式

@page

不是有效的媒体查询，将被忽略。对于打印样式，这应该是

@media print

。

margin

没有被应用到任何东西上-您想要类似的东西

@media print {
    mytargetelement {
        margin: 5mm
    }
}

---

这对你的问题有帮助吗？

我在Safari中打印时遇到了类似的问题。文本没有包装，会从页面右侧溢出。为了解决这个问题，我在样式表中添加了以下内容。nuke最重要的元素是Bootstrap的

.container

类

@media print {
html, body, main, header, footer, .container {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    position: relative !important;
    text-indent: 0 !important;
    clear: both !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    overflow: visible;
    margin: 0 auto 0.5% auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 0 !important;
    text-align: left !important;
    max-width: none !important;
    min-width: auto !important;
    min-height: auto !important;
    max-height: auto !important;
    direction: ltr !important;
}}

之前：

之后：

---

请提供相关的HTML，并删掉对问题没有影响的CSS（例如，我们不需要

可见性：可见

，因为没有任何设置为

可见性：隐藏

）。如果您使用“代码片段”（单击“编辑”时会出现

图标，我们将能够看到结果演示！在您编辑问题以添加完整（但最少）示例之前，这是我唯一的建议：）