Я хочу отправить электронное письмо от нашей системы клиентам, где некоторые теги должны быть скрыты от них. Я установил следующий CSS:
.hidden { display: none; }
Но это не работает. Какие существуют решения или альтернативы для скрытия элементов в электронной почте?
В Outlook 2007 используется механизм Microsoft Word для рендеринга HTML, который имеет очень ограниченную поддержку CSS. Эта страница описывает те вещи, которые вы можете ожидать для работы (display является одним из "не поддерживаемых" ).
К сожалению, вы не можете многое сделать. Вы можете заключить элемент в комментарии HTML <!-- ... -->, которые помешали бы его рендерингу, но об этом.
Используйте mso-hide:all в промежутке, окружающем контент, и в любых других тегах в пределах диапазона.
Единственным рабочим решением, которое я нашел, является использование условного форматирования в источнике HTML:
<!--[if !mso 9]><!-->
<div>This block of code will display <b>everywhere</b> except in Outlook 2007.</div>
<!--<![endif]-->
Я провел небольшое тестирование и обнаружил, что 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 встроенный, в HEAD и в BODY
Там, где есть идентификаторы, я тестировал следующий CSS в HEAD одного электронного письма и в BODY другого сообщения.
<style>
#displayNone {
display: none;
}
#displayNoneImportant {
display: none !important;
}
#displayNoneDisplayNoneImportant {
display: none;
display: none !important;
}
</style>
РЕЗУЛЬТАТЫ: CSS Inline и BODY
Outlook (все) = 2000, 2003, 2007, 2010, 2013, Android Outlook, Outlook.com(IE, Fx, Chrome)
Gmail (все) = Gmail в IE, Fx, Chrome и Android
РЕЗУЛЬТАТЫ: CSS Inline и HEAD
ДЛИННАЯ ИСТОРИЯ SHORT
Outlook 2000+ поддерживает display: none; достаточно хорошо. Gmail нет. Было трудно понять, что было неудачно или работает в Gmail из-за того, насколько это не удалось. Экран даже обрезался в определенных ситуациях.
Я буду повторять позже и публиковать скриншоты, если смогу - прямо сейчас моя настройка тестирования занимает слишком много времени, чтобы сохранить скриншоты каждого сценария и читателя.
Outlook 2007 имеет ограниченную поддержку CSS и HTML. Подробнее читайте в этой статье.
Если правила CSS на основе классов не работают, попробуйте правила CSS на основе ID. Просто постарайтесь максимально упростить свои правила.
Вы можете использовать этот инструмент для проверки ваших HTML и CSS для использования в Outlook 2007.
Позднее, но, как общие рекомендации для электронной почты:
1) Всегда используйте таблицы
2) Не используйте следующие теги: div, p, я или b (используйте em для курсива и сильные для смелости.
3) Не устанавливайте свойства шрифта на теге body или даже на родительские элементы, такие как теги таблицы; вы должны установить свойства шрифта в каждой области, где отображается текст; однако вы можете установить его на тэг tr, а не на каждый тег td. Просто не забудьте сделать это на КАЖДОЙ tr, которая имеет текст, отображаемый в его последующих td, если текст не обернут внутри другого или нескольких других элементов/тегов.
4) Поместите "mso-hide: all;" как стиль INLINE для родительского элемента, а также дочерние элементы. Вы также можете попробовать установить ширину и высоту в 1px (настройка на 0 редко работает для многих клиентов), а затем установить видимость на "скрытый" и на всякий случай установить непрозрачность ".0" или "0", просто чтобы закрыть ваши базы.
5) Не используйте неиспользуемые элементы пространства в пустом td, где вы используете их для создания дополнений (что лучше, чем использование прошивки CSS в большинстве случаев). Элемент nbsp заставит высоты быть неспособными быть менее определенного размера, что раздражает, когда вы пытаетесь создать, скажем, интервал между двумя пикселями.
5) Использование трюка "if lt mso9" работает хорошо, но не используйте его для "скрытия" вещей на рабочем столе и отображения их на мобильном устройстве. Он менее изящный, и он также создает раздутый код. Используйте приведенные выше методы (ы), если вы можете, если не для чего-то другого, для будущей версии compatibility sake.
<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>
Это работает для меня!
Немного поздно, но вы можете попробовать, например:
<span style="font-size: 0px; color: White; display: none">Yada Yada</span>
Это решение было протестировано в Outlook 2007 и работает.
< td style="line-height:0; border:0; font-size:0px" >
как удалить теги с помощью "display: none;" с кодом.
Я использую string.split строку html String.split("<td ") и StringBuilder sb.
то if-else. если разделительная строка не .contains("display:none;"), то добавьте в stringbuilder sb.append(String). обязательно верните "<td ", поэтому sb.append("<td " + String). Возможно, вы захотите исключить несколько разделенных строк, таких как строка с нулевым расщеплением, или которая содержит теги ("<h1 ", "<table ").
Попробуйте это - возможно, это сработает для вас.
.hidden{visibility: hidden;}