爲什麼Internet Explorer 8打印不可見的內容？

請檢查下面的HTML代碼。第3個DIV部分可見，因爲它被第2個覆蓋（其具有白色背景）。目前爲止，IE和Firefox都能正常顯示。爲什麼Internet Explorer 8打印不可見的內容？

打印頁面時出現問題。在Firefox中，它按照頁面上顯示的方式進行打印。在Internet Explorer 8中，它以某種方式完全打印所有DIVS。它看起來好像在第二個DIV（或全部）上應用不透明度過濾器，使第三個DIV完全可見...

我爲頁面的打印版本創建一個帶有新內容的白色疊加層（以javascript）。由於上面描述的問題，它不能正常工作，因爲覆蓋下的所有內容也被打印出來...

爲什麼IE8打印這個看不見的內容？有解決方案嗎？

<html> 
<head> 
</head> 
<body> 

<div style="background-color:#999999;position:relative;border:solid 1px black;width:500px;height:500px;">  
    <div style="position:absolute;width:300px;height:200px;top:5px;left:5px;border:dashed 1px #cccccc;z-index:99;background-color:white;"></div> 
    <div style="position:absolute;width:100px;height:200px;top:100px;left:50px;border:dashed 5px #cccccc;z-index:98;background-color:white;"></div> 
</div> 



</body> 
</html>

來源

2009-06-10 Ropstah

RichieHindle可能有問題標記。打印時不能依賴顏色和類似的視覺技巧 - 爲了確保每張瀏覽器都能按照自己的規格操作頁面，紙張之間具有良好的對比度（當第一個Opera用戶嘗試打印時，您會喜歡它，特別是如果您使用CSS打印建議分頁符）。如果您希望在屏幕上看到它，您就需要簡單一些 - 只使用CSS的主要功能，不要依賴副作用來實現佈局。爲此，大多數網站都有單獨的可打印頁面。 – David 2009-06-10 12:25:56

他確實是真的。但是要求用戶更改打印設置並不合適。我最終隱瞞了完成這項工作的其餘內容。 – Ropstah 2009-06-10 13:20:37

IE有一個選項：

工具/ Internet選項/高級/打印/打印背景顏色和圖像

這是默認關閉的。這就是打印時忽略background-color樣式的原因。

來源

2009-06-10 12:05:49 RichieHindle

我不希望用戶更改打印設置，所以這不是我的解決方案。我最終隱藏了Jose Basilio建議的其餘內容。然而，你的回答對我的問題是正確的。這也給了我最好的洞察力！ – Ropstah 2009-06-10 12:31:40

理想的解決方案是將所有樣式放入CSS類中，而不是使用內聯樣式。這可以提供更好的控制，您可以使用Media Type來定義屏幕上可見的內容以及打印內容。

下面是一個如何使用CSS類和媒體類型來處理這個問題的示例。

<html> 
<head> 
<style> 
@media screen,print{ 
    .container{ 
    background-color:#999999;position:relative; 
    border:solid 1px black;width:500px;height:500px; 
    } 
} 
@media screen { 
    .hideForPrint{ 
    position:absolute;width:100px;height:200px;top:100px;left:50px; 
    border:dashed 5px #cccccc;z-index:98;background-color:white; 
    } 
} 

@media print { 
    .hideForPrint,.hideForPrint2{ 
    display:none; 
    } 
} 
</style> 
</head> 
<body> 
<div class="container">  
     <div class="hideForPrint"></div> 
     <div class="hideForPrint2"></div> 
</div> 
</body> 
</html>

來源

2009-06-10 12:06:22

爲什麼Internet Explorer 8打印不可見的內容？

回答

相關問題