Проблема с телом при использовании html-подписи в Apple Mail - PullRequest
Новая
       25

Проблема с телом при использовании html-подписи в Apple Mail

2 голосов
/ 18 мая 2019

Я использую следующий HTML-код для создания почтовой подписи в Apple Mail. Он должен отображаться во всю ширину и быть способным реагировать: с экрана компьютера на экран Ipad и / или телефона.

Основная проблема заключается в том, что я не могу добавить поля к основному тексту письма, не добавляя также поле к подписи слева и справа.

Если вы не применяете поля, текст попадает в начало окна электронной почты Apple, как вы могли бы теперь без подписи, по умолчанию оно составляет около 30 пикселей.

И если я добавлю поле, то оно также создаст поле справа, которое заставит вас использовать нижнюю полосу для прокрутки вправо и просмотра текста, написанного там.

Попытка добавить поля left-left и margin-right даже для отступа, но ни один из известных мне вариантов не сработал. Я должен сказать, что мои знания HTML это довольно ограниченный и базовый. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:v="urn:schemas-microsoft-com:vml"
  xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mail Signature</title>


<style type="text/css">
div {margin: 0; padding:0; margin: 0 !important; padding:0 !important;}
p {font-size: 14px; mso-line-height-rule:exactly; line-height:18px; font-family: Montserrat;}
body { width: 100% !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; margin: 0 !important; padding: 0 !important; }
.ExternalClass { width: 100% !important; }
.ExternalClass { line-height: 100% !important; }

backgroundTable {margin: 0! Важный; отступ: 0! важно; ширина: 100%! важно; высота строки: 100%! важно; } 

img { outline: none !important; text-decoration: none !important; -ms-interpolation-mode: bicubic !important; }
h1 a:active { color: red !important; }
h2 a:active { color: red !important; }
h3 a:active { color: red !important; }
h4 a:active { color: red !important; }
h5 a:active { color: red !important; }
h6 a:active { color: red !important; }
h1 a:visited { color: purple !important; }
h2 a:visited { color: purple !important; }
h3 a:visited { color: purple !important; }
h4 a:visited { color: purple !important; }
h5 a:visited { color: purple !important; }
h6 a:visited { color: purple !important; }
.ReadMsgBody {width: 100%;}
a {outline:none;}
.appleaddress1 a {color: #363636 !important; text-decoration: none;}
.appleaddress2 a {color: #FFFFFF !important; text-decoration: none;}    
span.yshortcuts { color:#000; background-color:none; border:none;}
span.yshortcuts:hover,
span.yshortcuts:active,
span.yshortcuts:focus {color:#000; background-color:none; border:none;}
.eoa_d7w{ width:100% !important; } .eoa_2v8{ color:#404040 !important; }


@media screen and (min-width: 1025px) {
.container {
    width: 1024px !important;
}

} 

@media (max-width: 1024px) {
table.container{width: 100% !important;}
th.behave{display:block; width: 100% !important; }
td.respond{width:100% !important; }
td.btn_left{text-align: center !important;padding-left:30px;}
img{width:100% !important;height:auto !important;}  
table.respond{width:100% !important;}
td.css_btn{text-align: center !important;}
body {width: 100% !important;}
td.no-padding{padding-top: 15px !important;}
td.one-col{padding-left:0px !important;padding-right:0px !important;}
td.two-col{padding-left:15px !important;padding-right:15px !important;}
td.two-colo{padding-left:15px !important;padding-right:15px !important;}
td.two-colomn{padding-left:15px !important;padding-right:15px !important;padding-top: 6px !important;}
td.mbr_none{padding-left:0px !important;padding-right:0px !important;padding-top:5px !important;}
td.mbr_bottooms{padding-top:8px !important;}
div.special{width:100% !important;}
div.extra{white-space: wrap !important; word-wrap:break-word !important;word-break:break-all;width:100% !important;}
td.hidden{display:none; visibility: hidden; width: 0px !important; height:0px !important; font-size:0pt !important;line-height:0pt !important;}
th.hidden{display:none; visibility: hidden; width: 0px !important; height:0px !important; font-size:0pt !important;line-height:0pt !important;}
table.verywell{width:100% !important; min-width:100% !important;}
img[class="yesyesyes"] {width:100% !important;height:auto !important;min-width:100% !important;}

} 

</style>

</head>

<body style="width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: #ffffff; min-width: 100%; font-size: 14px; mso-line-height-rule: exactly; line-height: 18px;"><a style="font-family: Montserrat;">text</a>
</body>

...