为什么在iPhone 6s，7和8的两列电子邮件签名中，图片和联系信息之间会出现较大的空白? [英] Why does a large white space appear in two column email signature in iPhone 6s, 7, and 8 between the image and the contact info?
本文介绍了为什么在iPhone 6s，7和8的两列电子邮件签名中，图片和联系信息之间会出现较大的空白?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试制作Gmail签名.当我通过Litmus运行代码时，它显示图像和右侧的联系信息之间在iPhone 6s，7和8上存在很大的差距.如何在此电子邮件客户端中更正布局?它出现在所有其他测试的客户端中.这是代码:
I'm trying to make a gmail signature. When I run the code through Litmus, it shows there is a large gap on iphone 6s, 7 and 8 between the image and the contact info on the right. How do I correct the layout in this email client? It appears right in every other client tested. Here is the code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kendra Doss HTML Signature</title>
<style type="text/css">
/* Client-Specific styles */
#outlook a { padding:0; } /* Force Outlook to provide a "view in browser" menu link. */
body { width:100% !important; -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 !important; }
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 !important;
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 !important;
pointer-events:auto;
cursor:default;
}
}
/* Responsive styles */
@media only screen and (max-width: 380px) {
td[class=wrapper] {
padding-top:0 !important;
padding-left:0 !important;
padding-right:0 !important;
}
table[class=mobile-view], td[class=mobile-view], img[class=mobile-view] {
width:300px !important;
height:auto !important;
}
td[class=clump] {
display:block !important;
padding-left:0 !important;
padding-right:0 !important;
width:100% !important;
}
td[class=aligncenter] {
width:340px !important;
height:auto !important;
text-align:center !important;
}
}
</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;">
<tbody>
<tr>
<td width="100" valign="top" align="left" class="clump" style="padding:0 0 0px; 0;">
<!-- 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;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<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>
<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>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>还附带了Litmus的屏幕快照，显示了它在iPhone中的显示方式 Litmus屏幕截图
Attached is also screenshots from Litmus of how it appears in iPhone Litmus screenshot
推荐答案
这可能与CSS中将宽度设置为100％
It might be to do with the width set to 100% in 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;
}
它应该解决间距问题.
这篇关于为什么在iPhone 6s，7和8的两列电子邮件签名中，图片和联系信息之间会出现较大的空白?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
