Gmail удаляет встроенный CSS

Question

У меня возникли проблемы с пробелами между моими изображениями в HTML-письмах, которые я создавал. Я узнал из руководств в Интернете, что использование display: block on img tags работает как легкое исправление. Однако кажется, что gmail теперь удаляет все встроенные CSS.

Я использую браузер Chrome. Я также тестировал это в Firefox, Opera, Safari и IE. Вопрос одинаковый для всех из них.

Это также влияет на проблему с высотой строки на тегах td. Известно, что некоторые пробелы вызваны проблемами с высотой строки, и ранее встроенный css был решением. Теперь, однако, я не могу написать css в строке или встроенный, чтобы переопределить, что gmail применяется.

Кто-нибудь знает о текущем рабочем процессе или решении?

Например, следующий не работает на Gmail с помощью Chrome - CSS-код удаляется Gmail:

<table width="700" cellpadding="0" cellspacing="0" border="0" height="592"> 
    <tbody style="line-height:0px;padding:0;margin:0;" width="700" height="592"> 
    <tr width="700" height="296"> 
     <td style="line-height:0px;" width="441" height="296"> 
      <a href="[the url]" target="_blank" width="441" height="296"> 
       <img src="[the url]" style="display:block;border:0;" width="441" alt="[the alt text]" height="296"/> 
      </a> 
     </td> 
     <td style="line-height:0px;" width="39" height="296"> 
      <img src="[the url]" style="display:block;border:0;" width="39" height="296"/> 
     </td> 
     <td style="line-height:0px;" width="220" height="296"> 
      <a href="[the url]" target="_blank" width="220" height="296"> 
       <img src="[the url]" style="display:block;border:0;" width="220" alt="[the alt text]" height="296"/> 
      </a> 
     </td> 
    </tr> 
    <tr style="line-height:0px;" width="700" height="296"> 
     <td style="line-height: 0px;" width="441" height="296"> 
      <a href="[the url]" target="_blank" width="441" height="296"> 
       <img src="[the url]" style="display:block;border:0;" width="441" alt="[the alt text]" height="296"/> 
      </a> 
     </td> 
     <td style="line-height:0px;" width="39" height="296"> 
      <img src="[the url]" style="display:block;border:0;" width="39" height="296"/> 
     </td> 
     <td style="line-height:0px;" width="220" height="296"> 
      <a href="[the url]" target="_blank" height="296"> 
       <img src="[the url]" style="display:block;border:0;" width="220" alt="[the alt text]" height="296"> 
      </a> 
     </td> 
    </tr> 
    </tbody> 
</table> 

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

Answer 1

Либо приложение тестирования, либо внешний вид могут обрезать встроенный стиль.

Пожалуйста, попробуйте align:left также вместо display:block.