【发布时间】：2018-05-09 14:02:06
【问题描述】：
我有一个 3 列响应式电子邮件布局（代码如下）。这几乎完美无缺。它在移动设备甚至 Outlook 桌面客户端上都能很好地显示。但由于某种原因，Gmail 和 Outlook.com 中的最后一张图片太高了一个像素。我知道这可能是因为 100% 宽度，但有人知道如何解决吗？你会看到我什至在我的图像上设置了像素宽度和高度，但是因为容器有 100% 的宽度，我认为这会导致它失败。有什么技巧吗？
我已经添加了图像和 Photoshop 指南，您可以清楚地看到最后一个比其他的扩展了一个像素。
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td valign="top" class="responsive-td block3up" style="width: 180px; padding-right: 5px;padding-left:10px;">
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;" class="stylingblock-content-wrapper">
<tr>
<td class="stylingblock-content-wrapper camarker-inner">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img data-assetid="84953" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/4adc30d0-46be-4e10-bdd5-b28937548ba4.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper">
<tr>
<td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner">
<i><a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/blog/index.cfm/2018/1/17/Free-Resources-for-Planning-Your-Next-Orlando-Vacation/" style="color:#808080;text-decoration:none;" title="">Free Resources for a Perfect Orlando Holiday</a></i>
<div style="font-size:12px;padding:10px 0 10px;margin-top:10px;">
<span class="blockme2">Whether it’s your first trip to Orlando or you’re coming back for more, Visit Orlando has free, trusted resources designed to help you plan your perfect Orlando holiday, including our Official Visitor Center, Live Chat assistance, an innovative mobile app and much more!</span></div>
</td>
</tr>
</table>
</td>
<td valign="top" class="responsive-td block3up" style="width: 180px; padding-left: 5px; padding-right: 5px;">
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper">
<tr>
<td class="stylingblock-content-wrapper camarker-inner">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img data-assetid="84871" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/0739b042-e92e-42a9-b294-9be63f8a3000.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper">
<tr>
<td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner"><i><a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/discounts-and-tickets/" style="color:#808080;text-decoration:none;" title="">Save Big With Orlando Deals & Discounts</a></i>
<div style="font-size:12px;padding:10px 0 10px;margin-top:10px;">
<span class="blockme2">Not only is Visit Orlando a trusted source for discounted tickets to the world’s most popular theme parks and attractions, but we’re also your source for bargains throughout the destination. Save on resorts, dining, shopping and everything else you’ll want to do in Orlando!</span></div>
</td>
</tr>
</table>
</td>
<td valign="top" class="responsive-td block3up" style="width: 180px; padding-left: 5px;padding-right:10px;">
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper">
<tr>
<td class="stylingblock-content-wrapper camarker-inner">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img data-assetid="84872" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/db9decce-c593-4bbd-a3c2-e819df747c47.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper">
<tr>
<td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner"><i><a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/blog/index.cfm/2018/2/07/Have-a-Blast-at-the-Newest-Attractions-in-Orlando" style="color:#808080;text-decoration:none;" title="">Blast Off With Orlando’s Newest Thrills</a></i>
<div style="font-size:12px;padding:10px 0 10px;margin-top:10px;">
<span class="blockme2">Orlando is constantly improving. In fact, we added so many new attractions in 2017 that, even if you’ve visited recently, you probably haven’t seen them all — starting with all-new thrills at Walt Disney World Resort, Universal Orlando Resort, SeaWorld Orlando and LEGOLAND Florida Resort!</span></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
这是head标签中的CSS
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
ReadMsgBody{ width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;}
p { margin: 1em 0;}
table td { border-collapse: collapse;}
img {outline:0;}
a img {border:none;}
p {margin: 1em 0;}
@-ms-viewport{ width: device-width;}
</style>
<style type="text/css">
@media only screen and (max-width: 480px) {
.container {width: 100% !important;}
.footer { width:auto !important; margin-left:0; }
.content-padding{ padding:4px !important; }
.mobile-hidden { display:none !important; }
.logo { display:block !important; padding:0 !important; }
img { max-width:100% !important; height:auto !important; max-height:auto !important;}
.header img{max-width:100% !important;height:auto !important; max-height:auto !important;}
.photo img { width:100% !important; max-width:100% !important; height:auto !important;}
.drop { display:block !important; width: 100% !important; float:left; clear:both;}
.footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;}
.nav4, .nav5, .nav6 { display: none !important; }
.tableBlock {width:100% !important;}
.responsive-td {width:100% !important; display:block !important; padding:0 !important; }
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* MOBILE GLOBAL STYLES - DO NOT CHANGE */
body, .tb_properties{font-family: Arial !important; font-size: 25px !important; color: #808080 !important; line-height: 1.5 !important; padding: 0px !important; }.buttonstyles{font-family: arial, helvetica, sans-serif !important; font-size: 16px !important; color: #FFFFFF !important; padding: 10px !important; }h1{font-family: Arial !important; font-size: 28px !important; color: #202020 !important; line-height: 1 !important; }h2{font-family: Arial !important; font-size: 20px !important; color: #202020 !important; line-height: 1 !important; }h3{font-family: Arial !important; font-size: 18px !important; color: #202020 !important; line-height: 1 !important; }a:not(.buttonstyles){line-height: 1 !important; }.mobile-hidden{display: none !important; }
/* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
.block3up { padding: 20px !important;background:#efefef;}
.blockme2{font-size:22px !important;}
.blockme{font-size:25px !important;}
}
@media only screen and (max-width: 640px) {
.container { width:100% !important; }
.mobile-hidden { display:none !important; }
.logo { display:block !important; padding:0 !important; }
.photo img { width:100% !important; height:auto !important;}
.nav5, .nav6 { display: none !important;}
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
}
</style>
<!--[if mso]>
<style type="text/css">
/* Begin Outlook Font Fix */
body, table, td {
font-family: Arial, Helvetica, sans-serif ;
font-size:16px;
color:#808080;
line-height:1;
}
/* End Outlook Font Fix */
</style>
<![endif]-->
</head>
【问题讨论】：
标签： email gmail html-email responsive