web-dev-qa-db-fra.com

Comment faire pour que MS Outlook accepte l'affichage de style CSS: bloquer?

Je compose un email HTML en utilisant un service (MailChimp). La façon dont MailChimp marque les en-têtes consiste à utiliser une balise SPAN et à lui donner le style en ligne de display:block.

MS Outlook 2010 ignore ce style. Je ne trouve aucun travail autour. Ainsi, les en-têtes s'enroulent, brisant l'affichage de la page souhaitée.

Oui, je sais qu'Outlook utilise MS Word pour afficher le HTML.

Supposons que je ne puisse pas intervenir et modifier manuellement le balisage.

Comment faire pour que MS Outlook accepte le style CSS display:block et afficher une balise SPAN comme élément de niveau bloc?

21
mmcglynn

L'attribut CSS display n'est pas pris en charge dans cette version de MS Outlook.

Voici "The Book" sur ce que vous pouvez et ne pouvez pas utiliser:

campaignmonitor.com/css/

Fondamentalement, si vous ne pouvez pas changer votre majoration en un élément de bloc nativement -, vous êtes bloqué.

La meilleure chose est de le faire à l'ancienne, malheureusement. = [Utiliser des tables sur des tables. donc tables = blocs.

1
lenard-magentoinks

Je me suis retrouvé dans cette situation exacte: avoir besoin de créer des styles d'en-tête qui s'affichaient correctement dans Outlook sans la possibilité de modifier le code HTML car je remets le modèle à un client.

J'imagine que vous avez déjà résolu ce problème, mais pour quiconque a passé plusieurs heures à essayer de répondre à cette question et tombe sur ce fil, voici comment je l'ai résolu:

  1. Supprimez H1, H2, etc. par défaut de Mailchimp.

  2. Créez vos propres styles d'en-tête (je les ai nommés en-tête, sous-en-tête, etc. juste pour éviter toute confusion)

  3. Utilisez les nouveaux styles d'en-tête comme vous le souhaitez. Les nouveaux titres s'affichent sous forme de blocs.

Je ne suis pas exactement sûr de ce qui se passe sous le capot car je ne peux pas inspecter dans Outlook, mais je suppose qu'en n'utilisant pas les styles par défaut, Mailchimp encapsule le texte d'en-tête dans des divs au lieu de travées.

1
Noah Manger