GMail игнорирует " дисплей: нет"

Для тех, кто обращается сюда с аналогичной проблемой, связанной с разработкой мобильной/настольной электронной почты в Gmail и 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.

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

Проблема, которая у меня была, была для Gmail и Outlook. В соответствии с ОП, мобильный контент, который я имел, не будет скрываться в 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 id из, в моем случае gmail решил проблему для меня.

В любом случае, возможно, кто-то найдет это полезным в будущем!

Использование display:none !important; устраняет проблему с gmail, но затем она игнорируется Outlook 2007 и 2010. Обошел это с помощью display:none; display:none !important; Таким образом, gmail использует одну версию, а Outlook 2007 и 2010 - другую.

Это уже было сказано 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 будет отображаться как ожидалось (без связки = ' s), а простой текст со всеми разделенными div будет:

This is part of an html message template.
=========================================
This is some footer text below a black line.

Полностью удалите этот элемент из исходного кода.

Клиенты электронной почты очень строго относятся к некоторым правилам CSS. Кроме того, поскольку никакой JavaScript не может быть выполнен внутри электронной почты, a display: none все равно не имеет там никакой функции, не так ли?

Спасибо за это, очень полезно для меня.

Попробуйте max-height для Gmail это должно забрать его. затем используйте max-height: наследовать !важно; в 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;
}
}

Чтобы скрыть элемент в 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.

У меня есть ситуация, в которой я только что сказал пару слов. Я использовал размер шрифта: 0px;.

<div style="font-size:0px">foo bar</div>

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

Опираясь на Дэна С., Еще один пример, который я часто использую.

@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>

С большим удовольствием, я хотел бы поделиться этой новостью со всеми, что gmail теперь поддерживает' display:none ' CSS свойство при тестировании по EmailMonks. Но вам нужно применить класс с CSS при использовании "display:none", чтобы быть нетронутым встроенным инструментом.

Вы можете прочитать больше здесь

Если у вас возникли проблемы с Gmail, исправление, указанное в номере три, сработало и для меня. Я применил аналогичный подход, используя теги div и переопределения в строке, а затем определил стиль CSS в теге head, специфичном для gmail. Всякий раз, когда я хочу что-то скрыть от outlook desktop, я делаю следующее: если !МСО. Смотрите пример ниже:

    <!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>