Warum druckt Internet Explorer 8 unsichtbare Inhalte?

überprüfen Sie bitte den HTML-Code unten. Der 3. DIV ist teilweise sichtbar, weil er von der 2. (die einen weißen Hintergrund hat) überlagert wird. Soweit alles gut, wird alles sowohl in IE als auch in Firefox korrekt angezeigt.Warum druckt Internet Explorer 8 unsichtbare Inhalte?

Das Problem beginnt, wenn ich die Seite drucke. In Firefox wird gedruckt wie auf der Seite angezeigt. In Internet Explorer 8 druckt es irgendwie alle DIVS vollständig aus. Es sieht aus, als ob es einen Opazitätsfilter auf dem 2. DIV (oder allen) anwendet, der den 3. DIV vollständig sichtbar macht ...

Ich erstelle ein weißes Overlay mit neuen Inhalten (in Javascript) für eine Druckversion einer Seite . Aufgrund des oben beschriebenen Problems funktioniert es nicht korrekt, da der gesamte Inhalt unter dem Overlay ebenfalls gedruckt wird ...

Warum druckt IE8 diesen unsichtbaren Inhalt? Gibt es eine Lösung?

<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>

Quelle

2009-06-10 Ropstah

RichieHindle hat wahrscheinlich das Problem markiert. Sie können sich beim Drucken nicht auf Farben und ähnliche visuelle Tricks verlassen - um einen guten Kontrast auf Papier zu gewährleisten, manipuliert jeder Browser die Seite nach seinen eigenen Spezifikationen (Sie werden es lieben, wenn Ihr erster Opera-Benutzer versucht, zu drucken, insbesondere wenn Sie CSS-Druckvorschläge wie Seitenumbrüche). Wenn Sie möchten, dass es so gedruckt wird, wie Sie es auf dem Bildschirm sehen, müssen Sie mit Einfachheit gehen - verwenden Sie nur die primäre beabsichtigte Funktionalität von CSS, verlassen Sie sich nicht auf die Nebenwirkungen, um Ihr Layout zu erreichen. Die meisten Websites haben nur eine separate druckbare Seite für diesen Zweck. – David

Stimmt, er war genau richtig. Es ist jedoch nicht wünschenswert, dass Benutzer aufgefordert werden, die Druckeinstellungen zu ändern. Ich versteckte den Rest des Inhalts, der den Job erledigt. – Ropstah

IE hat eine Option:

Extras/Internetoptionen/Erweitert/Druck/Druckhintergrundfarben und Bilder

die standardmäßig ausgeschaltet ist. Deshalb ignoriert es Ihre background-color Stile beim Drucken.

Quelle

2009-06-10 12:05:49 RichieHindle

Ich möchte nicht, dass Benutzer die Druckeinstellungen ändern, daher ist dies für mich keine Lösung. Am Ende versteckte ich den Rest des Inhalts, wie Jose Basilio vorgeschlagen hatte. Deine Antwort stimmt jedoch zu meiner Frage. Dies gab mir auch den besten Einblick in das Problem! – Ropstah

Die ideale Lösung besteht darin, alle Ihre Stile in CSS-Klassen zu platzieren, anstatt Inline-Stile zu verwenden. Dies gibt Ihnen mehr Kontrolle und Sie können die Media Type verwenden, um zu definieren, was auf dem Bildschirm sichtbar ist und was gedruckt wird.

Hier ist ein Beispiel, wie Sie dies mit CSS-Klassen und Medientypen erreichen können.

<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>

Quelle

2009-06-10 12:06:22

Ich verwende verschiedene Stylesheets für Druck und Bildschirm. Dies war nur ein Beispiel. Mein Beispiel wäre die richtige Antwort: Add "display: none;" bis zum 3. DIV. +1 für eine Antwort, die der Lösung entspricht, die ich bereits hatte! – Ropstah

Warum druckt Internet Explorer 8 unsichtbare Inhalte?

Antwort

Verwandte Themen