所以我在我的网站上遇到了关于我的形象的问题。我在容器中有一个图像,它向右延伸了一点。这一切都很好,花花公子,适用于所有邮件客户端,除了基于 Web 的邮件客户端(我测试了 hotmail 和 gmail)。下面的图片进行说明。
正确的情况(在邮件客户端中(我使用默认的 mac 邮件程序)):http://prntscr.com/38xtbr
错误情况(在本例中为网页版gmail):http://prntscr.com/38xtf2
如您所见,图像不再像在任何其他邮件客户端中那样环绕页面。是否有解决此问题的方法,或者这对每个人来说都是新问题?
<td valign="top" width="195" class="sidebarContent" mc:edit="sidebar_content">
<img style="position: relative; left: 30px; width: 195px;height: 44px;border: 0;line-height: 100%;outline: none;text-decoration: none; background-image: none !important;" src="http://gallery.mailchimp.com/f8e390cb608890835535cf525/images/bekijk67e9c3.png">
</td>
.sidebarContent{
/*@editable*/ color:#303030;
/*@editable*/ font-family:Helvetica;
/*@editable*/ font-size:13px;
/*@editable*/ line-height:150%;
/*@editable*/ text-align:left;
background-image: -webkit-gradient(
linear,
right bottom,
left top,
color-stop(0.65, #FFFFFF),
color-stop(0.77, #EFEFEF)
}
}
/**
* @tab Sidebar
* @section sidebar link
* @tip Set the styling for your email's sidebar links. Choose a color that helps them stand out from your text.
*/
.sidebarContent a:link, .sidebarContent a:visited, /* Yahoo! Mail Override */ .sidebarContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#E95497;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.sidebarContent img{
display:inline;
height:auto;
background-image: -webkit-gradient(
linear,
right bottom,
left top,
color-stop(0.65, #FFFFFF),
color-stop(0.77, #EFEFEF)
);
最佳答案
Gmail 和 Yahoo Web 客户端不支持这种定位。他们两个都不使用您尝试在图像上使用的“左”属性。 我认为你应该创建更宽的图像(无论是 png 格式)并在左侧给它一个透明背景,这样它就更宽并且放置得当。
一些电子邮件编码备忘单 --> http://www.campaignmonitor.com/css/
关于html - 网络邮件客户端 (gmail) 中的图像切换位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23007558/