图像在 Web 邮件客户端 (gmail) 中切换位置答案

【问题标题】：Image switches location in web-mail clients (gmail)图像在 Web 邮件客户端 (gmail) 中切换位置
【发布时间】：2014-05-25 07:29:14
【问题描述】：

所以我在我的网站上遇到了关于我的图片的问题。我在容器中有一个图像，它向右延伸了一点。这一切都很好，而且在所有邮件客户端中都很好，除了基于 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)

);

【问题讨论】：

您是使用外部 CSS 还是放置
我将添加我的代码，向您展示我当前的样式。

标签： html css gmail mailchimp

【解决方案1】：

Gmail 和 Yahoo 网络客户端不能很好地支持定位。它们都没有使用您尝试在图像上使用的“左”属性。我认为你应该创建更宽的图像（无论是 png 格式）并在左侧给它一个透明背景，所以它更宽并且放置正确。

电子邮件编码小抄 --> http://www.campaignmonitor.com/css/

【讨论】：