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

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

63 голосов
/ 15 марта 2011

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

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

enter image description here

Как мне продолжить?

Ответы [ 6 ]

124 голосов
/ 16 марта 2011

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

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

6 голосов
/ 11 декабря 2012

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

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

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

5 голосов
/ 15 марта 2011

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

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

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

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

2 голосов
/ 06 марта 2014

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

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

Шаги:

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

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

0 голосов
/ 23 июня 2015

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

http://character-code.com

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

...