Html 图像切换web邮件客户端(gmail)中的位置

Html 图像切换web邮件客户端(gmail)中的位置,html,css,gmail,mailchimp,Html,Css,Gmail,Mailchimp,所以我在我的网站上的形象有问题。我在一个容器中有一个图像,它向右延伸了一点。这一切都很好,非常棒,除了基于web的邮件客户端(我测试了hotmail和gmail),它在所有邮件客户端中都非常有效。下面的图片需要澄清 正确的情况(在邮件客户端中(我使用默认的mac mail程序)): 错误的情况(在本例中为gmail的网络版): 正如您所见,图像不再像在任何其他邮件客户端中那样环绕页面。这有解决办法吗?或者这对每个人来说都是新鲜事 <td valign="top" width="195" c

所以我在我的网站上的形象有问题。我在一个容器中有一个图像,它向右延伸了一点。这一切都很好,非常棒,除了基于web的邮件客户端(我测试了hotmail和gmail),它在所有邮件客户端中都非常有效。下面的图片需要澄清

正确的情况(在邮件客户端中(我使用默认的mac mail程序)):

错误的情况(在本例中为gmail的网络版):

正如您所见,图像不再像在任何其他邮件客户端中那样环绕页面。这有解决办法吗?或者这对每个人来说都是新鲜事

<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)

.侧边栏内容{
/*@可编辑*/颜色:#303030;
/*@可编辑*/字体系列:Helvetica;
/*@可编辑*/字体大小:13px;
/*@可编辑*/行高:150%;
/*@可编辑*/文本对齐:左;
背景图像:-webkit渐变(
线性的
右下角,
左上角,
颜色停止(0.65,#FFFFFF),
颜色停止(0.77,#ef)
}
}
/**
*@tab侧边栏
*@section侧边栏链接
*@tip设置电子邮件侧边栏链接的样式。选择一种颜色,帮助它们从文本中脱颖而出。
*/
.sidebarContent a:link、.sidebarContent a:visted、/*雅虎邮件覆盖*/.sidebarContent a.yshortcuts/*雅虎邮件覆盖*/{
/*@可编辑*/颜色:#E95497;
/*@可编辑*/字体大小:正常;
/*@可编辑*/文本装饰:下划线;
}
.侧边栏内容img{
显示:内联;
高度:自动;
背景图像:-webkit渐变(
线性的
右下角,
左上角,
颜色停止(0.65,#FFFFFF),
颜色停止(0.77,#ef)

)

Gmail和Yahoo web客户端不太支持定位。它们都不使用您试图在图像上使用的“left”属性。 我认为你应该创建一个更宽的图像(可以是png格式),在左侧给它一个透明的背景,这样它就更宽,位置也更合适


一点电子邮件编码的备忘-->

您是否使用了外部CSS或放置标签?许多Web邮件(如GMail)不支持这些类型的CSS,您应该使用内联CSS样式。我将添加我的代码,向您展示我当前的样式。