Желтые границы в письме под Samsung Email

257

01 декабря 2017, 03:54

Здравствуйте! Верстаю email-письмо, во всех клиентах отображается нормально, и только под Samsung Email появляются какие-то желтые границы. В коде этого цвета нет вообще. Не пойму откуда они взялись и куда копать?

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="x-apple-disable-message-reformatting"> 
  <style> 
    html, 
    body { 
      margin: 0 auto !important; 
      padding: 0 !important; 
      height: 100% !important; 
      width: 100% !important; 
    } 
     
    a, 
    a:visited { 
      color: #13c1fe; 
    } 
     
    img.rounded-image { 
      border-radius: 50%; 
    } 
  </style> 
</head> 
 
<body class="body" bgcolor="#ffffff;" style="font-family: Helvetica, Arial, sans-serif;background-color: #ffffff;"> 
 
  <table width="100%" style="width:100%;" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> 
    <tr> 
      <td valign="top" align="center"> 
        <table width="600" border="0" cellpadding="0" cellspacing="0"> 
          <tr> 
            <td valign="top" align="center"> 
 
              <table width="580" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> 
                <tr> 
                  <td width="580" colspan="2" height="60"></td> 
                </tr> 
                <tr> 
                  <td align="left"> 
                    <!-- content --> 
                  </td> 
                  <td align="right"> 
                    <table> 
                      <tr> 
                        <td align="center" valign="middle"> 
 
                        </td> 
                      </tr> 
                    </table> 
                  </td> 
                </tr> 
              </table> 
              <table width="580" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> 
                <tr> 
                  <td height="60"></td> 
                </tr> 
                <tr> 
                  <td width="580"> 
                    <img src="http://via.placeholder.com/580x220" style="width:580px;" width="580" border="0" editable /> 
                  </td> 
                </tr> 
                <tr> 
                  <td width="580" bgcolor="#fffceb"> 
                    <!-- content --> 
                  </td> 
                </tr> 
              </table> 
 
              <table width="580" border="0" cellpadding="0" cellspacing="0"> 
                <tr> 
                  <td width="580" style="height:67px;"></td> 
                </tr> 
              </table> 
 
              <table width="580" border="0" cellpadding="0" cellspacing="0"> 
                <tr> 
                  <td align="center" width="580"> 
                    <span style="font-size: 22px;text-align: center;color: #000000;"> 
                                                Отзывы пользователей 
                                            </span> 
                  </td> 
                </tr> 
                <tr> 
                  <td style="height:30px;"></td> 
                </tr> 
              </table> 
              <table width="580" class="review-item" border="0" cellpadding="0" cellspacing="0" bgcolor="#f5ffea"> 
                <tr> 
                  <td width="580"> 
                    <!--content--> 
                  </td> 
                </tr> 
              </table> 
              <table width="580" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> 
                <tr> 
                  <td width="580" style="height:50px;"></td> 
                </tr> 
              </table> 
            </td> 
          </tr> 
        </table> 
        <!--wrapper table end--> 
      </td> 
    </tr> 
 
    <tr> 
      <td valign="top" align="center" bgcolor="#e7f8fe" style="padding-top:20px;padding-bottom:20px;"> 
        <!--wrapper table--> 
        <table width="600" border="0" cellpadding="0" cellspacing="0"> 
          <tr> 
            <td valign="top" align="center"> 
              <!-- footer author --> 
              <table width="580" border="0" cellpadding="0" cellspacing="0"> 
                <tr> 
                  <td width="580"> 
                    <table border="0" cellpadding="0" cellspacing="0"> 
                      <tr> 
                        <td style="width:110px;"> 
                          <!--image--> 
                        </td> 
                        <td> 
                          <div style="padding:15px;"> 
                            <!-- content --> 
                          </div> 
                        </td> 
                      </tr> 
                    </table> 
                  </td> 
                </tr> 
              </table> 
            </td> 
          </tr> 
        </table> 
        <!--wrapper table end--> 
 
      </td> 
    </tr> 
 
    <tr> 
      <td valign="top" align="center" bgcolor="#426774" style="padding-top:30px;padding-bottom:30px;"> 
        <!-- footer social & apps --> 
        <table width="580" border="0" cellpadding="0" cellspacing="0"> 
          <tr> 
            <td width="580"> 
 
              <table width="580" border="0" cellpadding="0" cellspacing="0"> 
                <tr> 
                  <td width="290" valign="top"> 
                    <!-- content --> 
                  </td> 
                  <td width="290" valign="top"> 
 
                  </td> 
                </tr> 
              </table> 
 
 
            </td> 
          </tr> 
        </table> 
      </td> 
    </tr> 
  </table> 
</body> 
 
</html>

Answer 1

Добавь в главный css файл этот код и все должно исправиться

* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

Answer 2

Оберните вашу главную таблицу в таблицу с единственной ячейкой вроде вот такой:

<table width='100%' height='100%' > 
    <tr> 
        <td width='100%' height='100%' bgcolor='#e2e3e7'> 
            <!-- Здесь ваша главная таблица --> 
        </td> 
    </tr> 
</table>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Аналог justify content : space beetwen для вертикали?

Вот при justify content space beetwen все элементы гармонично занимают всю ширину, а есть ли тут что то похожее только по вертикали дабы занимали всю высоту

497

CSS