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打印樣式使文本重疊

回答

相關問題