Chrome css打印样式会使文本重叠

Question

我们一直在开发一个新的日历界面，其中包括一个可打印的经典＆＃34;日历视图。 @media print stylesheet进行了大量工作，虽然Safari中的所有内容都很棒，但事件时间与Chrome中的事件名称重叠。无法弄清楚原因。

@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%
    }

}

编辑：我通过在打印媒体查询中添加.event-location {float: none; margin-top: 0px;}来解决重叠问题。

此外，在Firefox中，内容左侧有很大的余量：

调试这些打印样式表很难弄清楚发生了什么。即使Chrome开发人员工具也会显示正确的打印预览，但进行真实打印会显示错误。

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

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

Answer 1

看起来像添加一些样式来覆盖Bootstrap默认值就是我所需要的：

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