Li: before {content: "■"; } Как кодировать этот специальный символ как Bullit в почтовом ящике?

После с гордостью раскрась мою пул liststyle без каких-либо графических 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;

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

Как я могу исходить отсюда?

Ответ 1

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

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

Ответ 2

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

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

Это сработало для меня благодаря этому сообщению .

Ответ 3

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

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

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

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

Ответ 4

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

Шаги:

Введите десятичную версию Unicode, например 8226, в поле ввода зеленого инструмента.
Нажмите Dec code points
Посмотрите результат в поле Unicode U+hex notation (например, U + 2022)
Используйте его в своем CSS. Например content: '\2022'

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

Ответ 5

Вы не должны использовать 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>

Это гарантирует, что ваши пули работают в каждом почтовом клиенте.

Ответ 6

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

http://character-code.com

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