Chrome css打印样式使文本重叠

我们一直致力于新的日历界面，其中包含可打印的“经典”日历视图。 @media print stylesheet有很多工作要做，并且尽管Safari中的所有内容都很棒，但活动时间与Chrome中的活动名称重叠。无法弄清楚原因。Chrome css打印样式使文本重叠

@media print { 
    body{ 
     -webkit-print-color-adjust:exact; 
    } 
    img, 
    .calendar-nav button, 
    .calendar-date-picker, 
    .event .btn-group { 
     display: none; 
    } 
    .calendar-nav { 
     text-align: center; 
     padding-top:20px; 
    } 
    .calendar-nav .date-title { 
     font-size: 50px; 
     font-weight: normal; 
    } 
    a:link:after, 
    a:visited:after { 
     content: ""; 
    } 
    #calendarTable div.event { 
     padding: 0; 
     margin-left:0; 
     text-indent: 0; 
    } 
    .events.active { 
     width: 100% 
    } 

}

enter image description here

编辑：我加入.event-location {float: none; margin-top: 0px;}到印刷媒体查询固定的重叠问题。

此外，在Firefox有一个巨大的优势，以内容的左边：

enter image description here

这是相当困难的调试这些打印样式表要弄清楚到底是怎么回事。即使Chrome开发人员工具也会显示正确的打印预览，但是做一个真实打印显示它不正确。

有关如何解决这些问题的任何想法？在我们的主要样式表中使用@media print是否有问题？

http://www.puc.edu/calendar?state=full

来源

2014-10-31 Nic Hubbard

能提供显示这个问题的一个演示？没有html和css就很难说。 – 2014-10-31 17:49:10

对不起，我本来打算。刚刚添加了URL和'@media print'样式。 – 2014-10-31 18:07:21

我还没有打印。但是，当您使浏览器窗口非常小时，您可以重现上述屏幕截图。您似乎有一些浮动问题，由@media（max-width：767px） .event-location {'。也许你可以[从打印中排除响应式媒体查询]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#not）作为开始。 – 2014-10-31 18:13:35

看起来增加了一些样式覆盖Bootstrap默认值是所有我需要的：

.event-location { 
    float: none !important; 
    margin-top: 0px !important; 
} 
.event-time { 
    float: none !important; 
} 
body .container { 
    width:100% !important; 
    margin:0 !important; 
}

来源

2014-10-31 20:36:36

Chrome css打印样式使文本重叠

回答

相关问题