电子邮件签名在某些客户端显示不正

时间:2017-10-31 10:59:37

标签: html-table html-email thunderbird

我正在制作一个相当简单的电子邮件签名。我之前没有这样做过,我正在尝试构建能够在尽可能多的电子邮件客户端中正确显示的内容。我目前已经意识到的两个问题是:某些图像没有显示,而Thunderbird中的用户也报告了一些显示问题。如果看起来很明显,我会非常感谢您的投入!带注释的代码如下所示:



<!DOCTYPE html>
    <html lang="en">
    <head>
	<meta charset="utf-8">
	<meta name="format-detection" content="telephone=no">
    </head>

    <body style="background-color:white;background-image:none;background-
    repeat:repeat;background-position:top left;background-attachment:scroll;font-
    family:'ARIAL', sans-serif;font-size:12px;line-height:normal;" >



	<div style="padding-top:1em;padding-bottom:4em;padding-right:0;padding-
    left:0;" >

		<div style="width:600px;margin-top:0;margin-bottom:0;margin-
        right:auto;margin-left:auto;" >


			<!-- Personal information -->
			<div  style="display:table;" >

				<!-- Name -->
				<h1 style="color:#34CF42;margin-top:0;margin-bottom:0;margin-
                right:0;margin-left:0;font-size:14px;font-weight:700;padding-
                top:20px;" >Joe blogs</h1>
				<!-- End Name -->

				<!-- Role -->
				<h2 style="color:#9B9B9B;margin-top:0;margin-bottom:0;margin-
                right:0;margin-left:0;font-size:12px;font-weight:500; padding-top: 
                3px;" >Job title</h2>
				<!-- End Role -->


				<!-- Personal - Phone numbers and links-->
				<table border="0" cellspacing="0" cellpadding="0">

					<tr style="padding-top:3px;padding-bottom:0px;padding-
                    right:0px;padding-left:0px;margin-top:0;margin-
                    bottom:0;margin-right:0;margin-left:0;">

						<td nowrap>
							<a href="tel:#" style="font-size:20px; color:#1F80BA; 
                            display:table-cell;vertical-align:top; text-
                            decoration:none !important;"  > <h3 style="white-
                            space: nowrap;color:#FF00FF;margin-top:0;margin-
                            bottom:0;margin-right:0;margin-left:0;font-weight:500; 
                            font-size:12px; text-decoration:none !important; 
                            padding-top: 5px;padding-right:5px;">+44&#173; 123 456 
                            7890	|</h3></a>
						</td>

						<td nowrap>
							<a href="tel:#" style="font-size:20px; color:#1F80BA; 
                            display:table-cell;vertical-align:top; text-
                            decoration:none !important;"  > <h3 style="white-
                            space: nowrap;color:#FF5521;margin-top:0;margin-
                            bottom:0;margin-right:0;margin-left:0;font-weight:500; 
                            font-size:12px; text-decoration:none !important; 
                            padding-top: 5px;padding-right:5px;">+44&#173; 
                            78910111212	</h3></a>
						</td>

					</tr>

				</table>

				<!--End Personal - Phone numbers and links -->

				<!-- Spacer -->
				<br>
				<!-- End Spacer -->

			</div>
			<!-- End Personal information -->


			<!-- information -->

			<table>
				<tr>
					<!-- logo -->
					<td width="60" style="padding: 5px 10px 0px 0px; vertical-
                    align:top;">
						<a href="https://placeholder.com"><img 
                        src="http://via.placeholder.com/60x60"></a>
					</td>
					<!-- end logo -->

					<!-- left hand info -->
					<td>
						<table>
							<tr>
								<td>
									<h1 style="color:#1f354a;margin-top:0;margin-
                                    bottom:0;margin-right:0;margin-left:0;font-
                                    size:12px;font-weight:700;" >Insert strapline 
                                    here</h1>
									<td>
									</tr>	

									<tr>
										<td>
											<h2 style="color:#9B9B9B;margin-
                                            top:3px;margin-bottom:0;margin-
                                            right:0;margin-left:0;font-
                                            size:12px;font-weight:500;" >Insert 
                                            another statement here</h2>
											<td>
											</tr>

											<!-- social icons -->
											<tr>
												<td>
													<table>
														<tr>
															<td>
																<a 
          href="https://placeholder.com"><img 
          src="http://via.placeholder.com/14x14"></a>
															</td>

															<td>
																<a 
          href="https://placeholder.com"><img 
          src="http://via.placeholder.com/14x14"></a>
															</td>	
														</tr>
													</table>
												</td>
											</tr>
										</table>
										<!-- end social icons -->
									</td>

								</tr>

							</table>

							<!-- End information -->



							<!--Spacer-->
							<br>
							<!--End Spacer-->




							<!--Small print-->
							<div  style="color:#898989;display:table; font-
      size:10px" >
								Sed ut perspiciatis unde omnis iste natus error 
     sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque 
     ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta 
     sunt explicabo.
							</div>
							<!--End small print-->


						</div>


					</div>	
				</body>
				</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案