web-dev-qa-db-ja.com

li：before {content： "■"; }この特殊文字を電子メールの文房具の箇条書きとしてエンコードする方法

誇張してリストURLを画像のurlまたはspanタグなしで色付けする の後：

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

これらのスタイルシートは丸い境界線やその他のcss3のものまで完全に機能しますが、電子メールの受信者（たとえば、Eudora OSE 1）はすべてのcssスタイルをブラウザーと同様に正しくレンダリングしますが、1つの問題があります： •または■は&#adabacadabra;に変換されます

最終的に電子メールでそのように表示されます：

enter image description here

ここからどのように進めますか？

csslistcharacter-encodingspecial-characters
63
Sam

以前はこの問題に直面したことはありませんでした（電子メールではあまり機能しませんでしたが、疫病のように回避します）が、Unicodeコードポイント（HTMLとCSSで異なる表記）で弾丸を宣言することもできます：content: '\2022'。 （10進数の8226ではなく、16進数を使用する必要があります）

次に、これらの文字をピックアップしてエンティティにHTMLエンコードするものを使用する場合（CSS文字列では機能しません）、それを無視すると思います。

124
Lea Verou

これを試すことができます：

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: "";
}

これのおかげでうまくいきました post 。

8
amit trvedi

二重エンコードの問題に直面しています。

■と•は互いに完全に同等です。両方とも nicode文字 'BULLET'（U + 2022） を参照しており、HTMLソースコードに並んで存在できます。

ただし、そのソースコードがHTMLエンコードagainされている場合、■および•が含まれます。前者は変更されず、後者は「＃8226;」として出力されます。画面上。

これは、これらの状況での正しい動作です。余分な2番目のHTMLエンコードが発生するポイントを見つけて、それを取り除く必要があります。

5
Tomalak

Leaのコンバーターは使用できなくなりました。私はこれを使用しました converter

手順：

  1. ツールの緑の入力フィールドに8226などのUnicode 10進数バージョンを入力します。
  2. Dec code pointsを押します
  3. ボックス内の結果を見るUnicode U+hex notation（例U + 2022）
  4. CSSで使用します。例content: '\2022'

追伸Webサイトとは関係ありません。

2
Larry K

電子メールでLIを使用しないでください。電子メールクライアント間では予測不能です。代わりに、各箇条書きを次のようにコーディングする必要があります。

<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>

これにより、すべての電子メールクライアントで箇条書きが機能するようになります。

2
DoubleA