[Résolu] Quand IE 8 refuse d'appliquer display: none à l'impression

Salut à tous,

Je me heurte à une étrange anomalie sous IE 8 (quand je dis IE 8, c'est aussi valable sous IE 7). J'ai une feuille de style comportant des règles CSS pour l'impression, dont une demandant d'appliquer un display: none aux éléments que je ne souhaite pas voir imprimés. En principe, IE applique une telle propriété sans broncher.

Or, si j'ai, par exemple, le bout de code HTML suivant :

<article role="article">
  <!-- Contenu de l'article -->
  <footer>
    <p>Publié le <time datetime="2011-10-19" pubdate>19 octobre 2011</time>, par [nom de l'auteur]</p>
    <h2>Vous avez aimé cet article&nbsp;? Vous pouvez le partager&nbsp;!</h2>
    <nav role="navigation">
      <ul>
        <li><a href="">Intitulé du lien</a></li>
        <!-- D'autres liens -->
      </ul>
    </nav>
    <h2>Une question&nbsp;? Une remarque&nbsp;?</h2>
    <p><a href="">Écrivez à l'auteur</a></p>
  </footer>
</article>

auquel j'applique, par exemple, la règle CSS suivante :

@media print {
  article footer h2, article footer h2 + p, article footer nav {
    display: none;
  }
}

tout le contenu à masquer reste affiché à l'impression sous IE 8 (en revanche, sous IE 9 et les autres navigateurs, il est bien masqué).

Est-ce parce qu'il y a des éléments HTML 5 (et pourtant, je sers bien à IE 8 la création de ces derniers dans le DOM, via un fichier JavaScript conditionnel) qu'IE 8 répugne à masquer ?

Au cas où ça peut vous être plus utile, je mets un lien vers une page entière incriminée.
Modifié par Victor BRITO (20 Oct 2011 - 15:24)

Salut,

Tu dois certainement avoir un style qui entre en conflit, une propriété mal interprétée. Si on teste avec un exemple simple, on constate qu'il n'y a pas de problème :
http://josselin.willette.free.fr/codessources/print-ie8/

Après test, il semblerait que IE8 ignore la ligne s'il y a dessus une propriété qu'il ne connait pas, dans ta page :last-child.

(L'exemple que tu donnes fonctionne parfaitement)

Salut,

pas testé mais pour savoir si c'est un élément HTML5 qui poserait problème, peut-être tester la même chose avec un namespace ?

Hello,

Je connais mal le problème mais je pense que c'est le même problème qu'essaie de corriger le script IE Print Protector, que tu n'utilises apparemment pas dans ton code.

Agylus a écrit :
Après test, il semblerait que IE8 ignore la ligne s'il y a dessus une propriété qu'il ne connait pas, dans ta page :last-child.

Le problème ne vient pas de là. Dans ma feuille de style pour impression, j'utilise, entre autres, les pseudo-éléments ::before et ::after dans leur syntaxe CSS 3, que je double des mêmes dans leur syntaxe CSS 2.1 pour IE 8, et IE 8 ne bronche pas.

Felipe a écrit :
pas testé mais pour savoir si c'est un élément HTML5 qui poserait problème, peut-être tester la même chose avec un namespace ?

J'avais déjà l'intuition que ce sont les éléments HTML 5 qui, quand ils sont ciblés par les sélecteurs, provoquent une telle crise d'indigestion, pour ainsi dire. La preuve, si je m'amuse à pondre les règles CSS suivantes pour l'impression sous IE 8 :

* {
  display: none;
}
ul {
  display: none;
}
/* Ou n'importe quel sélecteur ciblant un élément pré-existant au HTML 5 */

elles sont respectées à la lettre.

Cela dit, je me vois mal alourdir le code HTML d'espaces de nom et d'éléments préfixés juste à cause d'IE 8 et versions antérieures.

fvsch a écrit :
Je connais mal le problème mais je pense que c'est le même problème qu'essaie de corriger le script IE Print Protector, que tu n'utilises apparemment pas dans ton code.

J'ai téléchargé le script, qui apporte des améliorations, en effet. Toutefois, la plupart des éléments censés être masqués restent toujours affichés quand j'effectue un aperçu avant impression. D'ailleurs, en essayant la page de démonstration sur le site en question, je n'obtiens pas le même aperçu que la capture d'écran (pourtant, j'ai beau utiliser un vrai IE 8). Le script en question ne serait-il pas fiable à 100 % ?

Moi j'opterais pour une classe "noprint" à appliquer librement dans le code HTML.
(Et le premier qui me dit que c'est pas sémantique peut aller relire la spécification HTML. )

fvsch a écrit :
Moi j'opterais pour une classe "noprint" à appliquer librement dans le code HTML.
(Et le premier qui me dit que c'est pas sémantique peut aller relire la spécification HTML. )

Figure-toi que j'ai pensé à cette parade... qui s'avère efficace.

La solution était de combiner le script d'IE Print Protector et l'utilisation d'une telle classe sur les éléments HTML pré-existants à HTML 5 (par exemple, un ul au sein de l'élément nav) ou la création d'un élément div de la même classe en cas de regroupement d'éléments à masquer. À noter aussi qu'un élément HTML 5 ciblé par un sélecteur d'id n'a pas besoin d'une telle classe pour être masqué (c'est curieux).

Merci beaucoup, Florent ! Sujet résolu.

Laurie-Anne, si tu nous lis, tu peux ajouter à ta signature la phrase : « Faut pas dire du mal d'IE 8 ».