У меня есть запрос, что gmail игнорирует "display: none" - что делать? в электронной почте html для скрытия arow или div
GMail игнорирует "display: none"
Ответ 1
Если style="display:none" не работает в Gmail, установите style="display:none !important;"
и это работает в Gmail.
Ответ 2
Для тех, кто работает здесь с аналогичной проблемой, связанной с разработкой электронной почты для мобильных/настольных компьютеров и Gmail, - если вы используете медиа-запросы и показываете/скрываете контент, встроенный css не сможет перезаписать встроенное важное объявление. Вместо этого вы можете использовать overflow: hidden, например:
<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>
В запросах встроенных медиа вы, естественно, отмените эти стили, чтобы открыть div, а затем скройте настольную версию содержимого.
@media only screen and (max-width: 480px) {
.mobile {
display : block !important;
width : auto !important;
overflow : visible !important;
float : none !important;
}
.desktop {
display : none !important;
}
}
К сожалению, свойство height не работает в Gmail, иначе это было бы лучшим решением, учитывая, что это создает раздел пробела под видимым содержимым, равным высоте div.
Ответ 3
Хотя это уже было ответило, я просто подумал, что смогу найти решение, которое действительно сработало для меня, если у кого-то возникнет такая проблема в будущем. Это действительно сочетание вышеупомянутых ответов и что-то еще, что я нашел в Интернете.
Проблема, с которой я столкнулась, связана с Gmail и Outlook. Согласно OP, мобильный контент, который у меня был, не скрывал бы в Gmail (Explorer, Firefox и Chrome) или Outlook (2007,2010 и 2013). Я решил это, используя следующий код.
Здесь мой мобильный контент:
<!--[if !mso 9]><!-->
<tr>
<td style="padding-bottom:20px;" id="mobile">
<div id="gmail" style="display:none;width:0;overflow:hidden;float:left;max-height:0;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<img src="imageurl" style="border:0;display:block;width:100%;max-height:391px;" />
</td>
</tr>
<tr>
<td style="border-left-style:solid;border-left-width:1px;border-left-color:#d5e1eb;border-right-style:solid;border-right-width:1px;border-right-color:#d5e1eb;background:#f7fafd;padding-top:15px;padding-bottom:15px;font-family:Arial,Helvetica,sans-serif;font-size:22px;color:#1c1651;padding-left:10px;padding-right:10px;text-align:left;" id="mobiletext" align="left">We're now on Twitter</td>
</tr>
<tr>
<td style="border-left-style:solid;border-left-width:1px;border-left-color:#d5e1eb;border-right-style:solid;border-right-width:1px;border-right-color:#d5e1eb;background:#f7fafd;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#585858;padding-left:10px;padding-right:10px;text-align:left;line-height:24px;" id="mobiletext"><a href="#" style="text-decoration:none;color:#0068ca;">Follow us now</a> for some more info.
</td>
</tr>
<tr>
<td>
<img src="imageurl" style="border:0;display:block;width:100%;max-height:37px;" />
</td>
</tr>
</table>
</div>
</td>
</tr>
<!--<![endif]-->
И вот CSS:
@media only screen and (min-width:300px) and (max-width: 500px) { /* MOBILE CODE */
*[id=mobile] {
width:300px!important;
height:auto!important;
display:block!important;
overflow:visible!important;
line-height:100%!important;
}
*[id=gmail] {
display:block!important;
width:auto!important;
overflow:visible!important;
float:none !important;
height:inherit!important;
max-height:inherit!important;
}
Исправления для Outlook
Итак, как вы можете видеть из приведенного выше кода HTML, обертывание всего содержимого этих тегов;
<!--[if !mso 9]><!--> <!--<![endif]-->,
скрывает содержимое для версий Outlook, о которых я упоминал. Для всех других почтовых клиентов display:none; работает нормально. Я также видел, что вы также можете использовать mso-hide:all, чтобы скрыть вещи для Outlook, но я подумал, что это было немного легче, чем размещение этого встроенного кода.
Исправления для Gmail
Теперь для Gmail вы можете увидеть, что я создал "специальный" id, называемый gmail, который затем я применил к div в <td>. Я пробовал СЧЕТЧИК другие методы использования таких вещей, как overflow:hidden inline и всевозможные другие комбинации, но это то, что сработало для меня.
Короче говоря, обертывание содержимого в <td> в <div>, которое затем содержит overflow:hidden,width:0 и т.д., затем перезаписывая эти стили, предоставляя div an id, в моем случае gmail проблема для меня.
В любом случае, может быть, кто-то найдет это полезным в будущем!
Ответ 4
Использование display:none !important; устраняет проблему с помощью gmail, но затем игнорируется Outlook 2007 и 2010. Обходите это с помощью display:none; display:none !important;
Таким образом, gmail использует одну версию, а Outlook 2007 и 2010 - другую.
Ответ 5
Уже сказано, что display:none !important; работает, но никто не указал для этого случая использования, поэтому я дам тот, над которым работал, когда нашел этот вопрос и решение на SO.
Я создавал многокомпонентное электронное письмо с открытым текстом и текстом html. В источнике html генерируется из файлов шаблонов, а простой текст создается из снятия тегов с полного сообщения электронной почты.
Чтобы включить дополнительный текст в текст, который не показан в html, самый простой способ - обернуть его в <div style="display:none !important>, который будет удален, когда генерируется простой текст. Например, если это ваш шаблон:
<p>This is part of an html message template.</p>
<div style="display:none !important">=================================</div>
<div style="border-top:3px solid black;margin-top:1em;">
<p>This is some footer text below a black line</p>
</div>
HTML будет отображать как ожидалось (no bunch of = 's), а обычный текст со всеми разделителями div будет:
This is part of an html message template.
=========================================
This is some footer text below a black line.
Ответ 6
Полностью удалите элемент из исходного кода.
Клиенты E-Mail очень строгие в отношении некоторых правил CSS. Также, видя, что в E-Mail не может быть выполнен JavaScript, у display: none нет никакой функции, не так ли?
Ответ 7
Спасибо за это, очень полезно для меня.
Попробуйте max-height для Gmail, это должно забрать его. затем используйте max-height: inherit! important; в CSS это должно устранить проблему с интервалом:
<div class="mobile" style="display:none; width:0px; max-height:0px; overflow:hidden;">
@media only screen and (max-width: 480px) {
.mobile {
display:block !important;
margin: 0;
padding:0;
overflow : visible !important;
width:auto !important;
max-height:inherit !important;
}
}
Ответ 8
Чтобы скрыть элемент в HTML-письме и работать в Gmail, вам нужно его обнулить и настроить размер в CSS (который Gmail игнорирует).
Так же:
<style>
@media only screen and (max-width: 480px) {
*[class~=show_on_mobile] {
display : block !important;
width : auto !important;
max-height: inherit !important;
overflow : visible !important;
float : none !important;
}
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!--[if !mso]><!-->
<td style="width: 0; max-height: 0; overflow: hidden; float: left;">
</td>
</tr>
<!--<![endif]-->
</table>
Кроме того, добавленный условный комментарий охватывает вас для Outlook 07.
Ответ 9
У меня есть ситуация, когда у меня было всего пару слов. Я использовал font-size: 0px;.
<div style="font-size:0px">foo bar</div>
Это сработало для меня.
Ответ 10
Основываясь на Дан С., еще один пример, который я часто использую.
@media only screen and (max-width: 480px) and (min-device-width: 320px) and (max-device-width: 480px) {
p[class="hidden"] { /* I use this format to get past Yahoo Mail */
display: block !important;
visibility: visible !important;
max-height: none !important;
}
}
<td>
<p class="hidden" style="display:none;visibility:hidden;max-height:0px;">You can't see me.</p>
</td>
Ответ 11
С большим удовольствием, я хотел бы поделиться этой новостью со всеми, что gmail теперь поддерживает свойство display: none 'CSS при тестировании EmailMonks. Но вам нужно применить класс с CSS, используя "display: none", чтобы не касаться инструмента инкрустации.
Вы можете прочитать здесь
Ответ 12
Если у вас возникли проблемы с Gmail, исправление, указанное в третьем номере, тоже работало на меня. Я применил аналогичный подход, используя теги div и переопределения в строке, а затем определяя стиль CSS в теге head, специфичном для gmail. В любое время, когда я хочу скрыть что-то с рабочего стола outlook, я делаю следующее: if! Mso. См. Пример ниже:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
So my code looks like this:
@media screen and (max-width : 480px) { div[id=gmail] {display:block!important;
width:100%!important;
overflow:visible!important;
float:none !important;
height:inherit!important;
max-height:inherit!important;}
}
</style>
<title></title>
</head>
<body>
<!--And the in the i have the following setting inline-->
<table>
<tr>
<td>
<div id="gmail" style=
"display:none;width:0;overflow:hidden;float:left;max-height:0;">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#E9E9E8"
align="center"><![if !mso]>
<tr>
<td valign="top">
<table width="133" bgcolor="#FFFFFF" style=
"border: 1px solid #c6c6c5;" cellpadding="0" cellspacing="0">
<!--My content--></table>
</td>
</tr>
<![endif]></table>
</div>
</td>
<!--This worked for me in Android 4.2 /4.1 /apple iOS
desktop web based: gmail, yahoo, Aol, Outlook.com in IE / FF and Chrome
desktop: outlook 2010--></tr>
</table>
</body>
</html>