inline styles de bordure dans un e-Mail HTML
Je suis en train de travailler sur un réactif HTML e-mail et je vais avoir un problème de rendu dans Gmail UNIQUEMENT dans IE (juste eu à être!) Il fonctionne très bien dans les autres 27 client variantes. nous avons besoin de soutien
J'ai mis en place un violon ici: http://jsfiddle.net/39gzj/
Maintenant, si vous regardez le code, vous verrez que il y a une frontière qui est grise, qui contient alors un autre de la frontière qui est blanc. Pour une étrange raison, Gmail dans l'Explorateur, ne sera pas montrer cette frontière à tous, sauf pour la bordure au bas du panneau de fond. Je pensais que c'était quelque chose à voir avec la façon que j'avais codé de la frontière (je vais sur quelqu'un elses code, je n'ai apporté quelques modifications mineures à ce) que la frontière a été fait comme suit:
border-left-style:solid;border-left-width:1px;border-left-color:#fff;
J'ai donc changé la façon dont la frontière à la fois gris et blanc pour être déclaré comme suit:
border-left-style: 1px solid #fff;
Mais cela ne fait aucune différence que ce soit. Cela me conduit fou de sorte s'il vous plaît aider si vous le pouvez. Je pensais que peut-être quelque chose à faire avec les largeurs? Mais après avoir joué un peu avec ce qu'il vient de se casser le problème dans tous les autres clients. Toute aide serait grandement apprécié que je peut briser ma tête dans l'écran de mon ordinateur bientôt.
Apprécier que ce code contient fou styles en ligne mais c'est bien sûr la nature des e-mails HTML.
Mise à JOUR: Enlever le blanc de la bordure intérieure qui est sur le <td>
éléments rend la bordure grise. Est-ce quelque chose à faire avec moi réglage de la largeur de façon incorrecte?
Mise à JOUR 2 : C'est IE9 que c'est rendu de manière incorrecte. Et SEULEMENT pour Gmail.
border-left:1px solid #fff;
Ne serait-il pas juste
border-left
plutôt que border-left-style
? Le style se réfère au type de ligne, dans votre cas solid
Merci les gars, allez courir avec cette et lui donner un essai par le biais de Tournesol.
-soupir- quelle version(s) de IE vous rencontrez des problèmes avec?
Je connais ce sentiment. Selon le Tournesol ils utiliser IE9 pour basé sur le Web les clients de messagerie.
OriginalL'auteur zik | 2013-04-16
Vous devez vous connecter pour publier un commentaire.
Votre problème est que la frontière est sur la table elle-même. Vous avez tendance à trouver que les clients de messagerie n'aime pas ça. Le chemin que j'ai eu autour de celle-ci en plaçant des tableaux dans des tableaux un peu comme ceci:
Voici le code: jsfiddle
J'ai créé 2 façons différentes pour obtenir un effet similaire. Vous pouvez choisir celui qui fonctionne le mieux pour vous.
Je vois aussi que vous avez utilisé max-width qui certains clients de messagerie n'aime pas alors que pourrait être votre problème. voici la campaignmonitor guide pour les classes css et ce que vous devriez et ne devriez pas utiliser: http://www.campaignmonitor.com/css/
max-width
de la question, mais nous l'utilisons pour beaucoup de nos e-mails et il n'est pas encore un problème (là je vais tenter le destin!)La manière que j'ai appliqué mon frontière est très différent de vous-même. Je suis l'aide d'une petite entretoise image pour lui donner un 1px de la bordure supérieure et pour la bordure à gauche et à droite de ma table interne est un peu plus petit que le plus gros de la table et il est dit à l'aligner au centre qui donne l'apparence d'une frontière. Je viens à l'encontre de ce problème à plusieurs reprises et son la sur;y solution que j'ai trouvé
Ok merci s'accoupler. Je vais vous donner ce un tourbillon. Si c'était moi, je viens de l'utiliser 1px rembourrage à l'intérieur de la table et de la table externe du gris. Damn de ces e-mails HTML.
De cette façon, peut aussi le travail, vous pouvez donner un coup de feu.
J'ai mis à jour mon code afin que vous puissiez voir de 2 façons différentes d'obtenir le même effet. De la sorte avec les images qui fonctionne le mieux si vous souhaitez supprimer un ou plusieurs des frontières côtés.
OriginalL'auteur Andrew
J'utilise la suite sur une table dans mon e-mail et n'ai pas de questions.
border-left: 2px #000000 solid;border-right: 2px #000000 solid;
Je l'ai testé dans plusieurs navigateurs & e-mail des clients. Assurez-vous que vos styles sont en ligne, assurez-vous que vous n'avez pas de divergences de frontière sur l'tableaux, Outlook etc. semblent hériter de la mère
TD
Le problème que j'avais avec IE9 et Gmail, ce qui ressort pour moi, c'est qu'elle a rendu la version adaptable mon e-mail, afin de vérifier vos requêtes de média. La façon de résoudre ce problème est d'ajouter du CSS donc si vous avez
<td width="600">
vous devez vous assurer qu'elle devient<td width="600" style="width:600px;">
OriginalL'auteur Eoin