web-dev-qa-db-fra.com

li: avant {contenu: "■"; } Comment encoder ce caractère spécial sous forme de puce dans un papier à lettres de courrier électronique?

Après colorant fièrement ma balle liststyle sans les balises URL ou span de l’image , via:

ul{ list-style: none; padding:0;  margin:0;  }
li{ padding-left: 1em; text-indent: -1em;    }
li:before { content: "■"; padding-right:7px; }

Bien que ces feuilles de style fonctionnent parfaitement jusqu'aux bordures arrondies et à d’autres éléments css3, et bien que le destinataire de l’e-mail (par exemple, Eudora OSE 1) rende tous les styles css correctement, comme dans un navigateur, il existe un problème: les puces telles que • ou ■ se convertir en &#adabacadabra;

Apparaissant enfin comme ça dans les emails:

enter image description here

Comment puis-je procéder à partir d'ici?

csslistcharacter-encodingspecial-characters
63
Sam

Je n’avais jamais rencontré ce problème auparavant (peu travaillé sur le courrier électronique, je l’évite comme un fléau), mais vous pouvez essayer de déclarer la puce avec le point de code Unicode (notation différente pour CSS que pour HTML): content: '\2022'. (vous devez utiliser le nombre hexadécimal, pas le nombre décimal 8226)

Ensuite, si vous utilisez quelque chose qui récupère ces caractères et les code HTML en entités (ce qui ne fonctionnera pas pour les chaînes CSS), je suppose que cela sera ignoré.

124
Lea Verou

Vous pouvez essayer ceci:

ul { list-style: none;}

li { position: relative;}

li:before {
    position: absolute;  
    top: 8px;  
    margin: 8px 0 0 -12px;    
    vertical-align: middle;
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #ccc;
    content: "";
}

Cela a fonctionné pour moi, grâce à ce post .

8
amit trvedi

Vous faites face à un problème de double encodage.

■ et • sont absolument équivalents les uns aux autres. Les deux font référence au caractère Unicode 'BULLET' (U + 2022) et peuvent exister côte à côte dans le code source HTML.

Cependant, si ce code source est à nouveau codé HTML , il contiendra ■ et •. Le premier est rendu inchangé, le dernier sortira comme "# 8226;" sur l'écran.

C'est un comportement correct dans ces circonstances. Vous devez trouver le point où se produit le deuxième encodage HTML superflu et vous en débarrasser.

5
Tomalak

Le convertisseur de Lea n'est plus disponible. Je viens d'utiliser ceci convertisseur

Pas:

  1. Entrez la version décimale Unicode telle que 8226 dans le champ de saisie vert de l'outil.
  2. Presse Dec code points
  3. Voir le résultat dans la case Unicode U+hex notation _ (par exemple U + 2022)
  4. Utilisez-le dans votre CSS. Par exemple content: '\2022'

ps. Je n'ai aucun lien avec le site web.

2
Larry K

Vous ne devriez pas utiliser les LI dans le courrier électronique. Ils sont imprévisibles pour tous les clients de messagerie. Au lieu de cela, vous devez coder chaque puce comme ceci:

<table width="100%" cellspacing="0" border="0" cellpadding="0">
    <tr>
        <td align="left" valign="top" width="10" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">&bull;</td>
        <td align="left" valign="top" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">This is the first bullet point</td>
    </tr>
    <tr>
        <td align="left" valign="top" width="10" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">&bull;</td>
        <td align="left" valign="top" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">This is the second bullet point</td>
    </tr>
</table>

Cela garantira que vos puces fonctionnent dans chaque client de messagerie.

2
DoubleA