Несколько классов CSS не работают

Я преобразовываю docx в html-формат (используя apache poi) и отправляю его как электронную почту.Несколько классов CSS не работают

Фрагмент сгенерированного HTML выглядит как этот

<html> 
 
<head> 
 
\t .... 
 
\t <style> 
 

 
\t \t span.Normal{ 
 
\t \t \t font-family: 'Arial';font-size: 9.0pt; 
 
\t \t } 
 

 
\t \t span.Title{ 
 
\t \t \t font-family: 'Cambria';font-size: 28.0pt;color: #000000; 
 
\t \t } 
 

 
\t \t span.MySubtitle{ 
 
\t \t \t font-family: 'Arial';font-size: 18.0pt;color: #000000; 
 
\t \t } 
 

 
\t \t span.MyTitle{ 
 
\t \t \t font-family: 'Arial';font-size: 22.0pt;font-weight: bold;color: #000000; 
 
\t \t } 
 

 
\t ... 
 
\t </style> 
 
</head> 
 
<body> 
 
.... 
 

 
\t <p class="Normal Title MyTitle"> 
 
\t \t <span id="_GoBack"> 
 
\t \t \t <span class="Normal Title MyTitle">Welcome Message</span> 
 
\t \t \t <span class="Normal Title MyTitle"> </span> 
 
\t \t \t <span class="Normal Title MyTitle">Username</span> 
 
\t \t </p> 
 
\t \t <p class="Normal Title MySubtitle"> 
 
\t \t \t <span class="Normal Title MySubtitle">Issues and Solutions</span> 
 
\t \t </p> 
 

 
\t ... 
 
</body> 
 
</html>

Несколько классов CSS не распознаются клиентом Outlook. Это только рендеринг первого класса css «Normal» и игнорирование остальных. Но мое оригинальное форматирование (в docx) присутствует в классах «MyTitle» & «MySubTitle».

Поддерживает ли Outlook несколько css? Есть ли способ, которым я могу управлять несколькими поколениями css.

источник

2016-08-26 Fayaz

Ваш вопрос, вероятно, связан с [CSS Styling не будет работать в Outlook 2010?] (Http://stackoverflow.com/questions/8310609/css-styling-wont-work-in-outlook-2010). Чтобы помочь в отладке, вы также можете попробовать изменить содержимое различных классов. Возможно, Outlook _can_ поддерживает несколько классов, но ваши конкретные стили не работают. Например, попробуйте отдельные классы для 'font-family',' font-weight', 'color' и т. Д. –

[Здесь] (https://www.campaignmonitor.com/css/) - отличный инструмент для определения HTML и совместимость CSS с несколькими почтовыми клиентами. –

Хорошо, здесь много чего не так. Прежде всего, html не совсем прав. У вас есть параграфы, вложенные в абзацы, и вы используете интервалы для определения заголовков и разбиения каждого слова на собственный диапазон.

Я не знаю, для чего предназначены эти три точки в начале и конце, но они не должны быть в тегах стиля.

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

Мои предложений являются:

Использования семантической разметки
классов Отбросить и использовать семантические селекторы
Используйте DRY принцип (не повторяться)
списка правил с логической последовательностью , например, начиная с самого большого и заканчивая наименьшим.

Вот несколько реорганизованных кодов, использующих ваши правила стилизации и демонстрирующие, как использовать каждый элемент.

<html> 
 
\t <head> 
 
\t \t <style> 
 
\t \t \t body { 
 
\t \t \t \t color: #000000; 
 
\t \t \t } 
 
\t \t \t h1, 
 
\t \t \t h2, 
 
\t \t \t p { 
 
\t \t \t \t font-family: 'Arial'; 
 
\t \t \t } 
 
\t \t \t h3 { 
 
\t \t \t \t font-family: 'Cambria'; 
 
\t \t \t } 
 
\t \t \t h1 { 
 
\t \t \t \t font-size: 28pt; 
 
\t \t \t } 
 
\t \t \t h2 { 
 
\t \t \t \t font-size: 22pt; 
 
\t \t \t } 
 
\t \t \t h3 { 
 
\t \t \t \t font-size: 18pt; 
 
\t \t \t } 
 
\t \t \t p { 
 
\t \t \t \t font-size: 9pt; 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <h1>Heading 1</h1> 
 
\t \t <h2> 
 
\t \t \t Heading 2 
 
\t \t </h2> 
 
\t \t <h3> 
 
\t \t \t Heading 3 
 
\t \t </h3> 
 
\t \t <p> 
 
\t \t \t This is paragraph text. 
 
\t \t </p> 
 
\t </body> 
 
</html>

источник

2016-08-31 21:25:45 Longblog

Этот html генерируется автоматически с помощью apache-poi. У меня нет никакого контроля над этим. Три точки представляют собой еще один код. – Fayaz

Как ранее сказал, что вы должны сначала проверить ваш HTML, чтобы сделать его чище. Письма не могут быть правильными и совершенными в каждом почтовом клиенте/сервере. Поэтому, если вы хотите все исправить, взгляните на все бесплатные и гибкие шаблоны, доступные в любом месте в Интернете.

Классическое, но эффективное решение для почты полагается в таблице .

Вы можете найти good example here

Кроме того, когда дело доходит до отображения на различных почтовых клиентов, Outlook является одним из самых сложных. Есть такие инструменты, как Litmus, который позволяет вам просматривать результат электронной почты, но это довольно дорого. В Fortunatly они также предлагают free responsive templates, которые вы можете использовать для вдохновения.

Не стесняйтесь публиковать улучшенную версию своего электронного письма, чтобы мы могли смотреть на нее и помогать вам более эффективно.

источник

2016-09-05 16:05:25 P13

Несколько классов CSS не работают

ответ

Смежные вопросы