Outlook 2007/10/13 work around

问题

I've encountered something that bugged me while testing my email marketing campaigns.

So here goes:

I use the following code so that images and some other bits won't print when a user prints the e-mail (It is for a hotel group so emails are printed often, with booking numbers and all).

<style media="print">
body { background-color:#FFFFFF; }
.no-print { display:none; }
</style>

Now, outlook 2007/10/13, aol mail and some other clients seem to consider themselves as printed media and apply the display:none rule on every no-print element, leaving the email in a dire state of emptiness.

I could remove it all completely, but that wouldn't be good practices for ecology.

Do any of you guys know of a work around? Like a way to force outlook to consider itself as a screen media?

Thanks a lot.

回答1:

Now that I have a better understanding of the question I think I found the beginning of a possible solution for you. This should ensure the printer style sheets CSS still work, but aren't displayed by clients, like Outlook 2007, when they shouldn't be.

Ran test with email 'as is' and sure enough Outlook 2007 was blank because it applied the print style sheets
Then I added this media query in the code example below
Outlook 2007 shows up with the other clients so it's ignoring the print stylesheet
Now in Google Chrome's print preview the text with .no-print doesn't display

Code Excerpt:

    <style media="print">

        @media only print {
            body { background-color:#FFFFFF; }
           .no-print { display:none; }
         }

    </style>

    </head>

<body >
<h1 class="no-print" style="font-size: 36px">LINE OF TEXT</h1>

Email Testing Link: https://litmus.com/pub/49bfd3b

来源：https://stackoverflow.com/questions/17110928/outlook-2007-10-13-style-media-print-work-around

标签

css

media-queries

html-email

Outlook 2007/10/13 <style media=“print”> work around

问题

回答1: