Microsoft Outlook for Mac

General
1

I have a requirement to show a div while reading the email but hide it when replying or forwarding the email. I’ve added display: none to div and display: block !important to the class in style as I observed styles are not loading when replying. This is working great on web, outlook mobile applications but is failing on Mac Outlook application and Apple’s Mail application.

Is there a way to hide the div in reply and forward on the above applications?

Thanks in advance

2

You’re running into a classic issue with email client rendering inconsistencies, especially with Mac Outlook and Apple Mail, which do not fully support dynamic CSS or scripting behavior in emails. In particular:

  • Apple Mail and Mac Outlook use WebKit-based rendering engines but apply strict sanitization, ignoring certain CSS and embedded <style> tags, especially in reply/forward modes.
  • Outlook for Mac may strip or alter your styles when replying or forwarding — particularly display: none or !important rules.

Goal Recap

You want to show a <div> when the email is being read, but hide it when the email is being replied to or forwarded, even in Mac Outlook and Apple Mail.

Known Working Strategy

A commonly used and more reliable strategy for this use case is:

Use mso-hide: all (for Outlook) + class="hide-on-reply" with conditional comments and noscript workarounds.

However, Apple Mail and Mac Outlook do not support conditional comments like <!--[if !mso]> (unlike Windows Outlook), nor do they support mso-hide. They also strip style tags on replies/forwards.

Therefore, use this alternative trick:

Use display:none inline in a conditional container that gets stripped on reply/forward.

Here’s a widely compatible method that works in most email clients:

Technique: Use Comments or Special Characters That Get Removed on Forward/Reply

<!-- Start of visibility wrapper -->
<div style="display:block;">
  <!--[if !mso]><!-- -->
  <div style="display:none;">This text will not be visible in reply or forward</div>
  <!--<![endif]-->
</div>

But again, Apple Mail and Mac Outlook don’t respect these comments, so instead:

Better Approach for Apple Mail & Mac Outlook

Use a hidden div with very specific inline styles, and exploit the fact that those apps strip styles in reply mode, causing the div to disappear.

<div style="display:block; max-height:0; overflow:hidden; color:transparent;">
  This content is visible only when the email is viewed in original mode.
</div>

Why this works:

  • When replying, Apple Mail and Mac Outlook strip or reset inline styles.
  • So your max-height:0 and color:transparent will be stripped or ignored, hiding the content unintentionally (which is what you want).

You can reverse this too:

<div style="display:none; color:#000; font-size:16px;">
  This content is visible only in original email view.
</div>

In this case, when the reply/forward view strips display:none, the block is now visible. But this is less predictable, so the first method (hide by overflow+max-height+transparent) is more consistent.

Combined Defensive Strategy

<div
  style="display:block; max-height:0; overflow:hidden; color:transparent; font-size:0; line-height:0;">
  <!-- Hidden content on reply/forward -->
  <div style="display:block; font-size:16px; color:#000;">
    Thank you for reading this email.
  </div>
</div>

This will:

  • Be visible in normal viewing mode.
  • Disappear (or not render properly) when replied or forwarded, especially in Apple Mail and Mac Outlook.

Limitations

  • There is no guaranteed bulletproof method across all email clients to detect “reply or forward” mode reliably.
  • Email is not interactive like web — you’re limited to static fallbacks and style degradation.