2
저는 Outlook에서 내 html 전자 메일을 손상시키는 첫 번째 좌절감에 처했습니다.전자 메일의 html 나란히있는 테이블은 Outlook 2007 이상에서 강제로 적용됩니다.
나는 640px 너비의 컨테이너 테이블을 가지고 있습니다. 두 개의 320px 테이블이 하나의 왼쪽 정렬, 하나는 오른쪽 정렬입니다. Word Engined Outlook (2007 이상)을 제외한 모든 이메일 클라이언트에서 사이트를 나란히 표시합니다.
중요한 부분입니다. 휴대 전화에서 볼 때 포함 된 표가 320px가되도록하는 코드가 있습니다. 이렇게하면 두 테이블이 다른 테이블 위에 겹쳐집니다. 이것은 모바일 용으로 계획된대로 작동합니다.
바탕 화면의 Outlook에서는 왼쪽 맞춤 표를 렌더링 한 다음 왼쪽 아래에 오른쪽 표를 렌더링하지만 오른쪽에 여전히 정렬하여 왼쪽 표 아래 큰 틈과 오른쪽 위의 큰 틈을 만듭니다 손 테이블.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
img
{display:block;}
a
{text-decoration:none;}
a:hover
{text-decoration: underline !important;}
td.contentblock p {
color:#FFFFFF;
font-size:16px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:12px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock p a {
color:#e45808;
text-decoration:none;
}
.heading {
font-size:24px;
font-weight:bold;
}
@media only screen and (max-device-width: 480px) {
table[class="table"], td[class="cell"] {
width: 320px !important;
}
td[class="footershow"] {
width: 320px !important;
}
table[class="hide"], img[class="hide"], td[class="hide"], br[class="hide"], div[class="hide"] {
display: none !important;
}
img[class="divider"] {
height: 1px !important;
}
img[id="header"] {
width: 320px !important;
height: 69px !important;
}
img[id="main"] {
width: 320px !important;
height: 45px !important;
}
img[id="footer"] {
width: 320px !important;
height: 43px !important;
}
p[class="reminder"] {
font-size: 11px !important;
}
span[class="secondary"] {
line-height: 20px !important;
margin-bottom: 15px !important;
font-size: 13px !important;
}
}
</style>
</head>
<body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#EEEEEE">
<tr>
<td bgcolor="#EEEEEE" width="100%">
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tr>
<td width="640" class="cell" style="color:#FFF;">
<table class="table" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#cc6600" class="contentblock cell" style="color:#FFFFFF;font-size:16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="left">
<tr>
<td>
<a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_01.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
</td>
</tr>
</table>
<table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="right">
<tr>
<td>
<a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_02.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
중 하나가 여전히 Outlook에서 사이드 테이블로 내 두 개의 측면이 할 수있는 방법을 찾아 도와하지만 여전히 휴대폰의 다른 아래 하나를 다시 정렬 할 수있는 경우
, 나는 매우 감사 할 것입니다.
mso-table-lspace 및 mso-table-rspace가 독자적으로 작동하지 않았습니다. 이미지 너비를 줄임으로써 320px에서 315px로 테이블 폭을 감싸는 것이 효과적이었습니다. 나는 내가 얼마나 멀리 벗어날 수 있는지보기 위해 계속 실험해야 할 것이다. 나는 정말로 마이크로 소프트가 사라질 것을 바란다. – Almeister9
@ Almeister9 당신의 코멘트는 나를 웃게 만들었습니다. 나는 몇몇 이메일을 만들어야 할 때마다 같은 것을 바란다 .... :-D – MeV
@ Almeister9 - Outlook 용 HTML 검사기에 대해 알고 있습니까? 순전히 소스 코드와 전자 메일 생성 간의 시행 착오 이외에 요소를 어떻게 검사 했습니까? – Nicola