дисплей: ни один не работает в Outlook 2007

Question

Я хочу отправить электронное письмо от нашей системы клиентам, где некоторые теги должны быть скрыты для них. Я установил следующий CSS:

.hidden { display: none; }

Но это не работает. Какие есть решения или альтернативы для сокрытия элементов в электронном письме?

Answer 1

Используйте mso-hide:all в диапазоне, охватывающем содержимое, и в любых других тегах в диапазоне.

Answer 2

Единственное рабочее решение, которое я нашел, - это использовать условное форматирование в источнике HTML:

<!--[if !mso 9]><!-->
<div>This block of code will display <b>everywhere</b> except in Outlook 2007.</div>
<!--<![endif]-->

Answer 3

Я провел небольшое быстрое тестирование и обнаружил, что Outlook (2000, 2003, 2007, 2010, 2013 и Outlook.com) поддерживает несколько вариантов display: none;, как и ожидалось. С другой стороны, Gmail в браузере и на Android с треском провалился.

Я проверил следующее:

<table>
  <tr>
    <td style="display: none;">01</td>
    <td style="display: none !important;">02</td>
    <td style="display: none; display: none !important;">03</td>
    <td id="displayNone">04</td> 
    <td id="displayNoneImportant">05</td>
    <td id="displayNoneDisplayNoneImportant">06</td>
  </tr>
</table>

Встроенный CSS, в ГОЛОВКЕ и в ТЕЛЕ

Там, где есть идентификаторы, я проверял следующий CSS в заголовке одного письма и в теле другого письма.

<style>
    #displayNone {
        display: none;
    }
    #displayNoneImportant {
        display: none !important;
    }
    #displayNoneDisplayNoneImportant {
        display: none;
        display: none !important;
    }
</style>

РЕЗУЛЬТАТЫ: CSS Inline и в ТЕЛЕ

1. Outlook (все) пройден; Ошибка Outlook.com на Android, сбой Gmail (все)
2. Outlook (все) пройден; Gmail (все) не удалось
3. Outlook (все) пройден; Gmail (все) не удалось
4. Outlook (все) пройден; Gmail (все) не удалось
5. Ошибка Outlook 2007, 2010 и 2013; Gmail (все) не удалось
6. Outlook (все) пройден; Gmail (все) не удалось

Outlook (все) = 2000, 2003, 2007, 2010, 2013, Android Outlook, Outlook.com (IE, Fx, Chrome)

Gmail (все) = Gmail в IE, Fx, Chrome и в Android

РЕЗУЛЬТАТЫ: CSS Inline и в ГОЛОВЕ

1. Outlook (все) пройден; Outlook.com Android не удалось; Gmail (все) не удалось
2. Outlook (все) пройден; Outlook.com Android не удалось; Gmail (все) не удалось
3. Outlook (все) пройден; Outlook.com Android не удалось; Gmail (все) не удалось
4. Outlook (все) пройден; Outlook.com Android не удалось; Gmail (все) не удалось
5. Outlook 2007, 2010 и 2013 не удалось; Outlook.com Android не удалось; Gmail (все) не удалось
6. Outlook (все) пройден; Outlook.com Android не удалось; Gmail (все) не удалось

КОРОТКО ДОЛГОЙ ИСТОРИИ

Outlook 2000+ довольно неплохо поддерживает display: none;. Gmail нет. Стало трудно различить, что не работает или работает в Gmail, из-за того, насколько сильно это не удалось. В некоторых ситуациях экраны даже обрезались.

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

Answer 4

Outlook 2007 использует движок Microsoft Word для рендеринга HTML, который имеет очень ограниченную поддержку CSS. Эта страница описывает, что вы можете ожидать от работы (display - одна из "не поддерживаемых").

К сожалению, вы мало что можете сделать. Вы можете заключить элемент в комментарии HTML <!-- ... -->, что остановит его рендеринг, но это все.

Answer 5

<p style="color:#ffffff;width:0px;height:0px;display:none"> 
<!--[if !mso]><!-->
<p style="color:#ffffff;width:0px;height:0px;display:none !important;">
<!--<![endif]-->
I am not showing !!!
</p>

Это работает для меня!

Answer 6

Outlook 2007 имеет ограниченную поддержку CSS и HTML. Прочитайте эту статью для получения дополнительной информации.

Если правила CSS на основе классов не работают, попробуйте правила CSS на основе ID. Просто постарайтесь сделать ваши правила максимально простыми.

Вы можете использовать этот инструмент для проверки HTML и CSS для использования в Outlook 2007.

Answer 7

Поздно, но, как общие рекомендации для электронной почты:

1) Всегда используйте таблицы

2) Не используйте следующие теги: div, p, i или b (используйте em для курсива и сильные для жирного шрифта.

3) Не устанавливайте свойства шрифта для тега body или даже для родительских элементов, таких как теги таблицы; вы должны установить свойства шрифта в каждой области, где отображается текст; однако, вы МОЖЕТЕ установить его на теге tr, а не на каждом теге td. Просто не забудьте сделать это для КАЖДОГО tr, в котором текст отображается в последующих td, если текст не заключен в другой или несколько других элементов / тегов.

4) Поставить "mso-hide: all;" как стиль INLINE для родительского элемента, а также дочерних элементов. Вы также можете попробовать установить ширину и высоту в 1px (установка в 0 редко работает для многих клиентов), а затем установить видимость на «скрытый» и на всякий случай установить непрозрачность на «.0» или «0», просто чтобы покрыть ваши базы .

5) Не используйте неразрывные пробельные элементы в пустых тд, где вы их используете для создания отступов (что лучше, чем использование заливок CSS в большинстве случаев). Элемент nbsp приведет к тому, что высота не сможет быть меньше определенного размера, что раздражает, когда вы пытаетесь создать, скажем, интервал между вершинами в 2px.

5) Использование трюка «if lt mso9» работает хорошо, но избегайте его, чтобы «скрыть» вещи в представлении рабочего стола и отображать их на мобильном телефоне. Это менее элегантно, и это также создает раздутый код. Вместо этого используйте вышеупомянутые методы, если вы можете, если не для чего-то другого, для будущей версии совместимости.

Answer 8

как насчет удаления тегов с "display: none;" с кодом. Я использую string.split HTML-строки String.split("<td ") и StringBuilder sb. тогда если-еще. если разделенная строка не .contains("display:none;"), тогда добавьте к stringbuilder sb.append(String). убедитесь, что вернули "<td ", поэтому sb.append("<td " + String). Вы можете захотеть исключить несколько разделенных строк, таких как пустая разделенная строка, или содержащих теги ("<h1 ", "<table ").

Answer 9

Это решение было протестировано в Outlook 2007 и работает.

< td style="line-height:0; border:0; font-size:0px" >

Answer 10

Слишком поздно, но вы можете попробовать, например:

<span style="font-size: 0px; color: White; display: none">Yada Yada</span>