在电子邮件模板(或IE8)中为outlook 2013创建一条相等的平方行？
在电子邮件模板(或IE8)中为outlook 2013创建一条相等的平方行？
提问于 2015-12-01 16:53:07
我创建了一行正方形，它在现代浏览器中工作，比如google中的Gmail，但是对于outlook，它显示如下：
4块合并在一起，也不尊重div的高度，有什么想法或解决办法？
<tr>
<td colspan="2" style="text-align: center;padding: 10px 0px; font-family: Helvetica, Arial, Tahoma, 'SimHei','微軟雅黑', STXihei, '華文細黑', sans-serif;">
<h3 style="text-align: center;margin-top: 0px; color: #606060;">Have a Question?</h3>
<table align="center" cellpadding="0" cellspacing="0" width="700px" border="0" style="margin:auto;">
<tr>
<td style="width:25%;text-align: center;"><a href="http://be-pure.com/en/" target="_blank"><img width="150" style="width:150px" src="{img_dir}en/q1.jpg" /></a></td>
<td style="width:25%;text-align: center;"><a href="http://be-pure.com/en/content/26-customer-service" target="_blank"><img width="150" style="width:150px" src="{img_dir}en/q2.jpg" /></a></td>
<td style="width:25%;text-align: center;"><a href="mailto:csr@be-pure.com"><img width="150" style="width:150px" src="{img_dir}en/q3.jpg" /></a></td>
<td style="width:25%;text-align: center; font-family: Helvetica, Arial, Tahoma, 'SimHei','微軟雅黑', STXihei, '華文細黑', sans-serif;">
<div style="border: 3px solid #6C6E70; height: 144px; width:144px;">
<p style="color: #58595b; font-weight: bold; margin-top: 10px; margin-bottom: 0px; text-decoration: none; font-size: 16px;">Useful Links</p>
<p style="margin-top: 10px; margin-bottom: 0px; font-size: 15px;"><a href="{my_account_url}" style="color: #58595b; text-decoration: none;">My Account</a></p>
<p style="margin-top: 5px; margin-bottom: 0px; font-size: 15px;"><a href="http://be-pure.com/en/content/11-refund-policy" style="color: #58595b; text-decoration: none;">Return Policy</a></p>
<p style="margin-top: 5px; margin-bottom: 0px; font-size: 15px;"><a href="http://be-pure.com/en/content/13-frequently-asked-questions" style="color: #58595b; text-decoration: none;">FAQ</a></p>
</div>
</td>
</tr>
</table>
</td>
</tr>谢谢你的帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-12-01 17:02:27
在电子邮件中，特别是Outlook 7/10/13，最好用固定的宽度而不是百分比来定义td。这样，您就可以正确地定义空间(我认为Outlook忽略了这些空间，并且将所有td混合在一起)。
这是一个很好的资源，如何支持一些CSS是在各种电子邮件客户端。https://www.campaignmonitor.com/css/边距是您特别不想使用的，因为它在Outlook.com上不受支持。
另外，如果这是针对电子邮件的，我建议不要使用p标记(因为它们在不同的电子邮件客户端中呈现方式不同)，您也可以通过向td添加一个高度来对文本进行居中，而不是使用nbsp--关于如何做到这一点，请参阅前面的答案：How to writte text in the middle of an image without positioning and z-index?
Stack Overflow用户
发布于 2015-12-01 17:03:58
Outlook不支持保证金属性，也不支持其任何变体：https://litmus.com/help/email-clients/outlookcom-margins/
可以使用填充，但不能在块元素上使用。考虑将p标记更改为表，并使用填充来获得所需的外观。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34025678
复制相关文章
相似问题
腾讯云开发者
