html - Chrome css 打印样式使文本重叠

Question

我们一直在开发一个新的日历界面，其中包括一个可打印的“经典”日历 View 。 @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;
}