IE從CSS Boilerplate打印空白頁

我的公司正在使用print.css進行打印。另外，我們還有另一個style.css，它覆蓋了包括print.css在內的任何其他.css文件。出於某種原因，當來自html5樣板（位於覆蓋文件中）的@media打印查詢處於打開狀態時，IE8和IE9正在打印空白頁。當它被註釋掉時，沒有問題。這裏有什麼問題？我們想從樣板文件中離開@media打印。IE從CSS Boilerplate打印空白頁

PRINT.CSS

@media print 
{ 
body * 
{ 
    visibility:hidden; 
} 

#basicShell #main, 
#basicShell #main *, 
.basicShell_container .content, 
.basicShell_container .content *, 
#mainShell_container .center_columnContent, 
#mainShell_container .center_columnContent * 
{ 
    visibility:visible; 
} 

#basicShell #main, 
.basicShell_container .content, 
#mainShell_container .center_columnContent 
{ 
    position:absolute; 
    left:0; 
    top:0; 
} 
}

的style.css（壓倒一切）

@media print { 
* { background: transparent !important; color: black !important; text-shadow: none  
!important; filter:none !important; -ms-filter: none !important; float: none 
!important;} /* Black prints faster: h5bp.com/s */ 
a, a:visited { text-decoration: underline; } 
a[href]:after { content: " (" attr(href) ")"; } 
abbr[title]:after { content: " (" attr(title) ")"; } 
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* 
Don't show links for images, or javascript/internal links */ 
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } 
thead { display: table-header-group; } /* h5bp.com/t */ 
tr, img { page-break-inside: avoid; } 
img { max-width: 100% !important; } 
@page { margin: 0.5cm; } 
p, h2, h3 { orphans: 3; widows: 3; } 
h2, h3 { page-break-after: avoid; } 
}

來源

2012-08-24 user1622874

在print.css的第一條規則使得body無形的所有子元素。目的似乎是將某些元素轉爲可見，但顯然這失敗了，也許是因爲標記（未公開）不以預定方式使用id和class屬性。

來源

2012-08-24 14:33:59

您必須考慮到正在您的網站中加載樣式表的優先順序。目前，您已在此說明的print.css樣式表：

body * { 
    visibility:hidden; 
}

該規則基本上隱藏文件裏面的「一切」。你提到styles.css樣式表應該覆蓋所有內容，但樣式表按照什麼順序被加載到頭文件中？如果print.css表單在style.css表單之後，則首先的規則將被採用。

也有你的鏈接引用中包含的media類型的情況，我不知道哪個具有更好的優先級;鏈接媒體類型或媒體查詢。

來源

2012-08-24 14:37:24

此外，爲什麼該規則甚至被使用？你可以刪除它，一切都會好的。 –

該規則隱藏了一切，以便您可以僅顯示某些元素（例如，不想在打印中顯示選擇列表）。 – dudeNumber4

我遇到了與HTML5 Boilerplate相同的問題。

在我的情況下，竟然是這行：

tr { page-break-inside: avoid; }

導致該空白頁IE8/9。該頁面在標籤中有大量內容（超過一頁的價值），IE決定通過跳過頁面並切斷內容來處理它。呸。

爲了避免與HTML5樣板搞亂，我增加了以下我自己的樣式，以及問題解決了：

tr { page-break-inside: auto; }

您的問題可能是由於不同的標籤，所以檢查任何設置頁面級闖入財產。

來源

2012-09-14 01:02:46

謝謝阿農！這在Firefox中也很有效。 –

我有與引導3.3相同的問題。這固定它！ – NLV

IE從CSS Boilerplate打印空白頁

回答

相關問題