Pourquoi est-ce qu'Internet Explorer 8 imprimer invisible contenu?

veuillez vérifier le code HTML ci-dessous. Le 3ème DIV est partiellement visible parce qu'elle est gainée par le 2ème (qui a un fond blanc). Tout bon jusqu'ici, tout s'affiche correctement sous IE et Firefox.

Le problème commence quand j'ai l'impression de la page. Dans Firefox, il imprime comme affiché sur la page. Dans Internet Explorer 8, c'est en quelque sorte imprime toutes les DIVS complètement. Il semble que si elle s'applique à une opacité du filtre sur le 2ème DIV (ou tous) qui en fait le 3ème DIV complètement visible...

- Je créer une superposition de couleur blanche avec de nouveaux contenus (en javascript) pour une version imprimable d'une page. Parce que le problème décrit ci-dessus, il ne fonctionne pas correctement parce que tout le contenu ci-dessous la superposition est également imprimé...

Pourquoi ne IE8 imprimer ce contenu invisible? Est-il une solution?

<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>
RichieHindle a probablement la problème marquée. Vous ne pouvez pas compter sur les couleurs et visuel similaire astuces lors de l'impression - pour assurer un bon contraste sur le papier tous les navigateurs manipule la page à son propre cahier des charges (que vous l'aimerez quand votre premier Opéra de l'utilisateur essaie d'imprimer, surtout si vous utilisez CSS suggestions d'impression comme les sauts de page). Si vous souhaitez l'imprimer comme vous le voyez sur l'écran, vous aurez besoin d'aller avec simplicité, utilisez uniquement la principale fonctionnalité prévue pour le CSS, ne comptez pas sur les effets secondaires de réaliser votre mise en page. La plupart des sites ont juste une autre page imprimable à cette fin.
Vrai qu'il était sur place. Toutefois demander aux utilisateurs de changer d'impression paramètres n'est pas souhaitable. J'ai fini par cacher le reste du contenu qui fait le travail.

OriginalL'auteur Ropstah | 2009-06-10

  1. 8

    IE dispose d'une option:

    Outils /Options Internet /Avancé /Impression /Imprimer l'arrière-plan les couleurs et les images

    qui est désactivée par défaut. C'est pourquoi il est ignorant de votre background-color styles lors de l'impression.

    Je ne veux pas que les utilisateurs de modifier les paramètres d'impression, donc ce n'est pas une solution pour moi. J'ai fini par cacher le reste du contenu que Jose Basilio a suggéré. Votre réponse est cependant correcte à ma question. Cela m'a aussi donné le meilleur aperçu de la problème de!

    OriginalL'auteur RichieHindle

  2. 13

    La solution idéale est de mettre tous vos styles à l'intérieur des classes CSS au lieu d'utiliser des styles en ligne. Cela vous donne plus de contrôle et vous pouvez utiliser le Type De Support de définir ce qui est visible sur l'écran et de ce qui sera imprimé.

    Voici un exemple de la façon dont vous pouvez vous approcher de ce avec des classes CSS et autres Types de Médias.

    <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>
    Je suis à l'aide de différentes feuilles de style pour l'impression et l'écran. C'était juste un exemple. J'ai mon exemple, la bonne réponse aurait été: Ajouter "display:none;" pour la 3ème DIV. +1 pour donner une réponse qui est la même que la solution que j'ai déjà eu!

    OriginalL'auteur Jose Basilio