为什么在图像和联系人信息之间的iPhone 6s,7和8两栏电子邮件签名中会出现大的空白区域?
问题描述:
我想做一个gmail签名。当我通过Litmus运行代码时,它显示图片和右侧联系人信息之间的iphone 6,7和8之间存在巨大差距。如何更正此电子邮件客户端中的布局?它看起来正好在所有其他测试客户端。下面是代码:为什么在图像和联系人信息之间的iPhone 6s,7和8两栏电子邮件签名中会出现大的空白区域?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kendra Doss HTML Signature</title>
\t <style type="text/css">
/* Client-Specific styles */
#outlook a \t \t { padding:0; } /* Force Outlook to provide a "view in browser" menu link. */
body \t \t \t \t { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; border:0; }
\t \t
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass \t { width:100%; } /* Force Hotmail to display emails at full width */
.ExternalClass,
\t \t .ExternalClass p,
\t \t .ExternalClass span,
\t \t .ExternalClass font,
\t \t .ExternalClass td,
\t \t .ExternalClass div { line-height:100%; } /* Force Hotmail to display normal line spacing.*/
img \t \t \t \t { outline:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; }
a img \t \t \t \t { border:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; }
p \t \t \t \t \t { margin:0px 0px !important; }
table \t \t \t \t { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
table td \t \t \t { border-collapse:collapse; }
/* iPad Styles */
@media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
\t \t \t \t text-decoration:none;
\t \t \t \t color:#000000;
\t \t \t \t pointer-events:none;
\t \t \t \t cursor:default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
\t \t \t \t text-decoration:default;
\t \t \t \t color:#000000 !important;
\t \t \t \t pointer-events:auto;
\t \t \t \t cursor:default;
}
}
/* iPhone Styles */
@media only screen and (max-width: 380px) {
a[href^="tel"], a[href^="sms"] {
\t \t \t \t text-decoration:none;
\t \t \t \t color:#000000;
\t \t \t \t pointer-events:none;
\t \t \t \t cursor:default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
\t \t \t \t text-decoration:default;
\t \t \t \t color:#000000 !important;
\t \t \t \t pointer-events:auto;
\t \t \t \t cursor:default;
}
}
\t \t
\t \t /* Responsive styles */
\t @media only screen and (max-width: 380px) {
\t \t td[class=wrapper] {
\t \t \t padding-top:0 !important;
\t \t \t padding-left:0 !important;
\t \t \t padding-right:0 !important;
\t \t }
\t \t \t
\t \t \t table[class=mobile-view], td[class=mobile-view], img[class=mobile-view] {
\t \t \t width:300px !important; \t
\t \t \t height:auto !important;
\t \t }
\t \t \t
\t \t td[class=clump] {
\t \t \t display:block !important;
\t \t \t padding-left:0 !important;
\t \t \t padding-right:0 !important;
\t \t \t \t width:100% !important;
\t \t }
\t \t \t
\t \t td[class=aligncenter] {
\t \t \t width:340px !important; \t
\t \t \t height:auto !important;
\t \t \t text-align:center !important;
\t \t }
\t }
</style>
</head>
<body>
<table width="340" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
\t <tbody>
\t \t <tr>
<td width="100" valign="top" align="left" class="clump" style="padding:0 0 0px; 0;">
\t <!-- Add your Avatar -->
<img src="https://i.imgur.com/BMWqfVH.jpg" alt="Kendra Doss" border="0" width="100" style="padding:10px 0px 0px 10px; display:block; border:0; outline:0;" />
</td>
<td valign="top" align="left" class="clump" style="padding:10px 0px 0px 0px;">
\t \t \t \t <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
\t \t \t \t \t <tbody>
<tr>
<td td width="240" style="padding:0px 0px 0px 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<!-- Edit your Name or Title -->
<td style="font-family: Helvetica, Arial, sans-serif; font-size:18px; line-height:24px; font-weight:800; text-transform:uppercase; color:#e34346; letter-spacing:1px;">Kendraa Doss</td>
</tr>
<tr>
<!-- Edit your job title or subtitle -->
<td height="15" style="font-family: Helvetica, Arial, sans-serif; font-size:10px; line-height:18px; font-weight:400; color:#6e7482; letter-spacing:1px;">UX & Visual Designer</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0 0 0 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr><td height="2" style="padding:0 0 0 10px; font-size: 2px; line-height: 2px; border-bottom: 1px solid #daddee;"> </td></tr>
<tr>
<td width="60%" class="clump">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="25" height="30" valign="middle"><img src="https://i.imgur.com/ZoPNmPa.png" alt="Phone" border="0" width="18" style="display:block; border:0; outline:none; padding:5px 0 0 0;" /></td>
<!-- Edit your Phone number -->
<td width="" height="30" valign="middle" align="left" style="padding:5px 0 0 0; font-family: Helvetica, Arial, sans-serif; font-size:12px; line-height:24px; font-weight:400; color:#2f3542;"> 719.216.3402</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
\t \t \t \t \t \t <tr>
<td style="padding:0 0 0 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="33%" class="clump">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="25" height="20" valign="middle"><img src="https://i.imgur.com/hnMRswj.png" alt="Web" border="0" width="18" style="display:block; border:0; outline:none;" /></td>
<!-- Edit your website URL -->
<td width="" height="20" valign="middle" align="left" style="font-family: Helvetica, Arial, sans-serif; font-size:12px; line-height:24px; font-weight:400; color:#2f3542;"><a href="http://www.kendradoss.com" style="text-decoration:none; color:#2f3542;">kendradoss.com</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
\t \t \t \t \t </tbody>
\t \t \t \t </table>
\t \t \t </td>
\t \t </tr>
\t </tbody>
</table>
</body>
附加也从石蕊截图它是如何出现在iPhone Litmus screenshot
答
我已经找到了需要清理的代码了一点点,因为有任何对外部插件的参考。之后,我测试了您的代码在iPhone 5,6,6plus(无法在7测试),iPad和Galaxy S5,并且找不到任何问题。
这里是你的代码的修改版本:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kendra Doss HTML Signature</title>
<head>
<style type="text/css">
/* Client-Specific styles */
#outlook a { padding:0; } /* Force Outlook to provide a "view in browser" menu link. */
body { width:100% ; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; border:0; }
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass { width:100%; } /* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div { line-height:100%; } /* Force Hotmail to display normal line spacing.*/
img { outline:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; }
a img { border:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; }
p { margin:0px 0px ; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
table td { border-collapse:collapse; }
/* iPad Styles */
@media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration:none;
color:#000000;
pointer-events:none;
cursor:default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration:default;
color:#000000 ;
pointer-events:auto;
cursor:default;
}
}
/* iPhone Styles */
@media only screen and (max-width: 380px) {
a[href^="tel"], a[href^="sms"] {
text-decoration:none;
color:#000000;
pointer-events:none;
cursor:default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration:default;
color:#000000 ;
pointer-events:auto;
cursor:default;
}
}
/* Responsive styles */
@media only screen and (max-width: 380px) {
td[class=wrapper] {
padding-top:0 ;
padding-left:0 ;
padding-right:0 ;
}
table[class=mobile-view], td[class=mobile-view], img[class=mobile-view] {
width:300px ;
height:auto ;
}
td[class=clump] {
display:block ;
padding-left:0 ;
padding-right:0 ;
width:100% ;
}
td[class=aligncenter] {
width:340px ;
height:auto ;
text-align:center ;
}
}
</style>
</head>
<body>
<table width="340" border="0" cellspacing="0" cellpadding="0" class="mobile-view">
<tbody>
<tr>
<td valign="top" align="left" style="padding:10px 0px 0px 10px; display:block; border:0; outline:0;">
<!-- Add your Avatar -->
<img src="https://i.imgur.com/BMWqfVH.jpg" alt="Kendra Doss" border="0" width="100" />
</td>
<td valign="top" align="left" style="padding:10px 0px 0px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td td width="240" style="padding:0px 0px 0px 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- Edit your Name or Title -->
<td style="font-family: Helvetica, Arial, sans-serif; font-size:18px; line-height:24px; font-weight:800; text-transform:uppercase; color:#e34346; letter-spacing:1px;">Kendraa Doss</td>
</tr>
<tr>
<!-- Edit your job title or subtitle -->
<td height="15" style="font-family: Helvetica, Arial, sans-serif; font-size:10px; line-height:18px; font-weight:400; color:#6e7482; letter-spacing:1px;">UX & Visual Designer</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0 0 0 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0"">
<tbody>
<tr><td height="2" style="padding:0 0 0 10px; font-size: 2px; line-height: 2px; border-bottom: 1px solid #daddee;"> </td></tr>
<tr>
<td width="60%" class="clump">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="25" height="30" valign="middle"><img src="https://i.imgur.com/ZoPNmPa.png" alt="Phone" border="0" width="18" style="display:block; border:0; outline:none; padding:5px 0 0 0;" /></td>
<!-- Edit your Phone number -->
<td width="" height="30" valign="middle" align="left" style="padding:5px 0 0 0; font-family: Helvetica, Arial, sans-serif; font-size:12px; line-height:24px; font-weight:400; color:#2f3542;"> 719.216.3402</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:0 0 0 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="33%" class="clump">
<table width="100%" border="0" cellspacing="0" cellpadding="0"">
<tbody>
<tr>
<td width="25" height="20" valign="middle"><img src="https://i.imgur.com/hnMRswj.png" alt="Web" border="0" width="18" style="display:block; border:0; outline:none;" /></td>
<!-- Edit your website URL -->
<td width="" height="20" valign="middle" align="left" style="font-family: Helvetica, Arial, sans-serif; font-size:12px; line-height:24px; font-weight:400; color:#2f3542;"><a href="http://www.kendradoss.com" style="text-decoration:none; color:#2f3542;">kendradoss.com</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
附:如果你不这样做,不要使用“!重要”。不恰当的使用可能会重叠风格,使问题解决生活地狱。
答
这可能与设置为100%宽度做在CSS
td[class=clump] {
display:block !important;
padding-left:0 !important;
padding-right:0 !important;
width:100% !important;
}
将其设置为:
td[class=clump] {
display:block !important;
padding-left:0 !important;
padding-right:0 !important;
width:auto !important;
}
应该解决的间距问题。