li: before{content:"■";} Как закодировать этот специальный символ в виде буллита в почтовой бумаге?

после того, как с гордостью раскрашивает мой liststyle bullet без каких-либо 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 правильно, так же, как в браузере, есть одна проблема: пули, как • или ■ обратиться в &#adabacadabra;

появляется, наконец, так в электронных письмах:

как мне действовать дальше?

6 60
css list character-encoding special-characters

6 ответов:

никогда не сталкивался с этой проблемой раньше (не работал много по электронной почте, я избегаю ее, как чумы), но вы можете попробовать объявить пулю с кодовой точкой unicode (другая нотация для CSS, чем для HTML):content: '22'. (вы должны использовать шестнадцатеричное число, а не 8226 десятичное)

затем, если вы используете что-то, что подбирает эти символы и HTML-кодирует их в сущности (которые не будут работать для строк CSS), я думаю, он будет игнорировать это.

120

вы можете попробовать это:

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.

6

вы столкнулись с проблемой двойного кодирования.

■ и • абсолютно эквивалентны друг другу. Оба относятся к символ Юникода ' пуля '(U+2022) и может существовать бок о бок в исходном коде HTML.

однако, если этот исходный код закодирован в HTML снова в какой-то момент, он будет содержать ■ и •. Первый отображается без изменений, последний будет отображаться как "•" на экране.

это правильное поведение в этих условиях. Вам необходимо найти точку, где происходит лишнее второе HTML-кодирование и избавиться от него.

5

конвертер Lea больше не доступен. Я просто использовал это конвертер

действия:

  1. введите десятичную версию Юникода, например 8226, в зеленое поле ввода инструмента.
  2. пресс Dec code points
  3. смотрите результат в поле Unicode U+hex notation (например, U+2022)
  4. используйте его в своем CSS. Например content: '22'

ps. У меня нет связи с веб-сайтом.

2

вы не должны использовать LIs в электронной почте. Они непредсказуемы для всех почтовых клиентов. Вместо этого вы должны кодировать каждую точку маркера следующим образом:

<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

этот сайт может быть полезным,

http://character-code.com

здесь вы можете скопировать его и поставить непосредственно на css html

-1