我正在做一份新闻通讯,其中大多数收件人都会使用Outlook,我遇到了两个主要问题。
首先,根据计算机,我得到一个不同的显示图像,如截图:
当我将图像的宽度值更改为750时,它可以在我的计算机上运行,但对我的同事来说太宽了:https://i.stack.imgur.com/QZxLf.png
当我将值更改为600(它应该如何)时,反转的情况会发生,对我来说太狭隘了,对她来说是完美的:https://i.stack.imgur.com/aFPGo。
这是代码:
<table class="baemail320resize" align="center" border="0" cellpadding="" cellspacing="0" style="height:350; max-height: 350px; max-width:600px; border-bottom: none!important;border-right: none !important;" width="600" height="350">
<tr>
<td bgcolor="#333333" height="350" background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" style="display:block; background-repeat: no-repeat; padding: 0;" valign="middle;" width="auto"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 350px;">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table class="baemail320resize" valign="middle" align="center" border="0" cellpadding="" cellspacing="15" style="height:350px; vertical-align:middle; max-height: 350px; max-width:600px; border-bottom: none; border-right: none ;" width="600">
<tr>
<td></td>
</tr>
<tr>
<td align="center" href="www.bdforum.org" ><img align="center" alt="LOGO" height="47px" href="www.bdforum.org" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" style="display:block;" width="88px"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff ;text-decoration:none; ">
<anpa href="##TellAFriend##" style="color: #fffff6 ; text-decoration:none;">FORWARD </anpa>
<anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="color: #fffff6 ; text-decoration:none;text-align: center;">SUBSCRIBE </anpa>
<anpa href="##OptOutAll##" style="color: #fffff6; text-decoration:none;">UNSUBSCRIBE</anpa>
<br>
</font></td>
</tr>
<tr>
<td align="center" valign="middle" width="600" style="padding: 1em;"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 20px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org" style="color: #fffff6;">BALTIC DEVELOPMENT FORUM</anpa>
</font></td>
</tr>
<tr>
<td align="center" style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important; ">LATEST BDF NEWS ESPECIALLY FOR YOU</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="center"><table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="160" style="margin: auto;">
<tr>
<td style="border-radius: 30px; background: #d1003e; text-align: center;"><a href="http://www.bdforum.org" style="background-color:#d1003e;border: 5px solid #d1003e; border-radius:30px;color:#ffffff;display:block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:25px;text-align:center;text-decoration:none;"> <span style="color:#ffffff;">WEBSITE</span> </a></td>
</tr>
</table></td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
<tr>
<td><img src="http://customers.anpdm.com/shared/images/pixel.gif" width="1" height="20" style="display:block;"></td>
</tr>
</table>
此外,还有另一个案例,其中包含了一个社交媒体面板,它可以在我的电子书上工作(它保持了我在代码中设置的宽度): https://i.stack.imgur.com/iWbIn.png
但不是她的(它太宽,图标增长): https://i.stack.imgur.com/NM0pS.png
代码:
<table class="baemail320resize" align="center" border="0" cellpadding="" cellspacing="0" style="max-height:60px; max-width:600px; border-bottom: none!important;border-right: none !important;" width="600" height="auto">
<tr>
<td><table class="baemail320resize" valign="middle" align="center" border="0" cellpadding="" cellspacing="0" style="max-height:60px; vertical-align:middle; max-width:600px; border-bottom: none; border-right: none ;" width="600">
<tr>
<td align="center" valign="middle" class="baemailwidthcollapse"><img src="http://customers.anpdm.com/shared/images/pixel.gif" align="center" link="" height="1" width="20" style="max-height:1; max-width: 20px;"></td>
<!-- EMPTY -->
<td align="center" valign="middle" href="https://www.facebook.com/bdforum.org"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset1x3.png" href="https://www.facebook.com/bdforum.org" link="https://www.facebook.com/bdforum.org" alt="FACEBOOK" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
<!-- FACEBOOK -->
<td align="center" valign="middle" href="https://twitter.com/bdforumorg"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset2x3.png" href="https://twitter.com/bdforumorg" link="https://twitter.com/bdforumorg" alt="TWITTER" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
<!-- TWITTER -->
<td align="center" valign="middle" href="https://www.youtube.com/user/balticdevforum"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset3x3.png" href="https://www.youtube.com/user/balticdevforum" link="https://www.youtube.com/user/balticdevforum" alt="YOU TUBE" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
<!-- YOU TUBE -->
<td align="center" valign="middle" href="https://www.flickr.com/photos/baltic-development-forum"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset4x3.png" href="https://www.flickr.com/photos/baltic-development-forum" link="https://www.flickr.com/photos/baltic-development-forum" alt="FLICKR" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
<!-- FLICKR -->
<td align="center" valign="middle" href="https://www.linkedin.com/company/baltic-development-forum"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset5x3.png" href="https://www.linkedin.com/company/baltic-development-forum" link="https://www.linkedin.com/company/baltic-development-forum" alt="LINKED IN" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
<!-- LINKED IN -->
<td align="center" valign="middle" class="baemailwidthcollapse"><img src="http://customers.anpdm.com/shared/images/pixel.gif" align="center" link="" height="1" width="20" style="max-height:1; max-width: 20px;"></td>
<!-- EMPTY -->
</tr>
</table>
<tr>
<td><img src="http://customers.anpdm.com/shared/images/pixel.gif" width="1" height="20" style="display:block;"></td>
</tr>
</td>
</tr>
</table>
我很欣赏关于如何摆脱这些问题的每一个小提示或想法,我相信我已经尝试了所有我能够做到的一切,特别是它可以在任何地方工作,但有些看起来PC客户端,你可以看到here
很抱歉很长的帖子,并提前感谢您的帮助!
答案 0 :(得分:0)
您的背景代码有点混乱。我把它清理了一下。试试这个:
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
</v:background>
<![endif]-->
尝试这样的事情:
<div style="background-color:#ff0000;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#7bceeb"/>
</v:background>
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
</td>
</tr>
</table>
</div>
尝试使用此工具格式化图片:https://backgrounds.cm/
另外,您没有包含样式表和元标记等<head>
信息。
您提供的表格结构不是很敏感。在IOS设备中,有一半的电子邮件被切断了。
最后,Outlook的最大大小为800px。您越接近该宽度,您使用不同版本的Outlook时遇到的问题就越多。
祝你好运。