2010-09-13 6 views
10

Comment obtenez-vous la compatibilité entre les navigateurs dans Print? tous les conseils pour imprimer le fichier css pour faire imprimer sur papier identique à partir de tous les navigateurs.Comment obtenir une compatibilité croisée entre navigateurs dans Imprimer sur la page de tous les navigateurs?

Modifier

J'utilise déjà Eric meyer CSS mais toujours face à des incohérences dans les différents navigateur lorsque nous prenons l'impression à partir du site.

Existe-t-il des déclarations CSS que nous pouvons toujours utiliser et mettre en haut dans print css, Comme d'autres réinitialisations css qui fonctionnent bien dans media=screen?

J'utilise déjà un autre pour l'impression css (print.css) avec media="print"


Serait-il préférable de garder * {posotion:static}, *{float:none}, * {clear:both} en version imprimée toujours css?

Répondre

17

Les résultats identiques sont impossibles. La sortie dépend non seulement de CSS, mais aussi de paramètres individuels pour les marges de la page, les capacités de l'imprimante, les polices disponibles, le format papier (A4 vs US Letter) et probablement beaucoup plus.

Pour CSS

  • Évitez les flotteurs et le positionnement (par rapport, absolu et fixe). Surtout Mozilla (Firefox) ne peut pas gérer ces propriétés très bien.
  • Utilisez page-break-* mais ne comptez pas dessus. Certains navigateurs insèrent des sauts de page même dans les images.
  • Vous ne connaissez pas la largeur et la hauteur de la page (A5). Gardez n'importe quoi aussi flexible que possible.
  • For performance, placez votre style d'impression dans la feuille de style principale dans une règle @media print {}.
  • Utilisez pt et non px pour les bordures et les marges. Une imprimante ne sait pas ce qu'est un pixel et peut arriver à des résultats étranges.
  • Développez votre mise en page d'impression dans Opera, qui offre actuellement le meilleur support pour @media print, et insérez des hacks de compatibilité lorsque vous avez terminé.
  • Internet Explorer peut se bloquer lors de l'impression si vous utilisez son reserved IDs.
  • Ne comptez jamais sur l'aperçu avant impression. Vous obtenez des résultats très différents sur les impressions réelles. Sauver la forêt tropicale avec un pilote d'impression-au-pdf. :)
+0

Merci pour tous les conseils. +1 pour bien comprendre ma question –

2

En html, utilisez un lien avec l'attribut "media" défini sur "print".

<LINK rel="stylesheet" type"text/css" href="print.css" media="print"> 

Vous pouvez désactiver tous les autres CSS et utiliser simplement votre CSS "print". réglez d'abord le média sur "écran". Testez-le comme vous testez un css normal dans tous les navigateurs. Selon mon expérience, ce à quoi il ressemble à l'écran ressemblera à peu près à l'impression.

Conseil:

1) garder votre mise en page aussi fluide que possible pour qu'il soit souple à ce que jamais la marge de papier, il a été fixé à.

2) restez simple.

3) Dans IE, les arrière-plans peuvent être manquants. Pour résoudre ce problème, accédez à: Outils> Options Internet> Avancé. dans la boîte de dialogue Paramètres, faites défiler jusqu'à Impression et activez l'option "Imprimer les couleurs et les images d'arrière-plan"

+0

Merci pour votre réponse. Je connais print css et 'media =" print "' ma question était différente. même si j'utilise la réinitialisation CSS dans le CSS principal, mais face à des incohérences dans l'impression –

+0

Eh bien, c'est commun car vous avez affaire à différents navigateurs. Vous devez créer des correctifs pour chacun d'eux, si nécessaire. – sheeks06