2017-10-16 3 views
0

J'essaye de créer un bouton bleu pour un modèle d'email. Le client de messagerie est Outlook 2007. J'ai appris qu'il ne supporte pas CSS3 j'ai donc écrit ce CSS pour le bouton:Comment créer un bouton CSS pour le modèle de courrier électronique Outlook 2007?

HTML:

<html> 
    <a id="button" style: "text-decoration: none;" href=""> 
     <span style="color: white;">Button</span> 
    </a> 
<html> 

CSS:

#button { 
    background-color: #4686E8; 
    border-radius: 10px; 
    display: block; 
    width: 142px; 
    height: 36px; 
    border-top: 2px #4686E8 solid; 
    border-bottom: 2px #4686E8 solid; 
    border-left: 2px #4686E8 solid; 
    border-right: 2px #4686E8 solid; 
    cursor: pointer; 
    padding: 14px; 
} 

Certaines propriétés, par exemple, border-radius et width/height ne fonctionnent pas dans le modèle d'e-mail. Il montre juste une boîte bleue avec le texte "Bouton" dessus. Comment puis-je créer un bouton en forme dans le modèle Outlook 2007?

+0

vous pouvez mettre les styles comme ** en ligne ** – Vishnu

Répondre

1

Outlook - especially the new MSWord based windows versions - ont tendance à avoir un mauvais support HTML/CSS. En effet, après Outlook 2003, Microsoft a décidé de cesser d'utiliser IE comme moteur de rendu pour Outlook, mais plutôt utiliser HTML Word - qui n'est pas HTML réelle.

Donc, pour Outlooks, non seulement travaillez-vous avec les limites de HTML normalement associés à courrier électronique, mais aussi la bizarrerie de HTML Word et XML.

Certains de vos styles (par exemple, border-radius) ne sont pas pris en charge dans Outlook (campaign monitor has a great 'does it work' reference for HTML email CSS). Si vous avez désespérément besoin d'avoir le rayon de la bordure, etc. Vous pouvez utiliser le XML et les conditions MSO supplémentaires - mais méfiez-vous, cela ne fera pas que gonfler le code, mais peut causer un comportement inhabituel, surtout dans les réponses/transferts.

Un bon endroit pour commencer avec ce code est de buttons.cm qui, bien que pas parfait, peut vous donner un excellent point de départ.