Magento销售电子邮件不以中心为主

时间：2014-06-29 00:33:33

标签： html css email magento

我无法弄清楚为什么我收到的销售电子邮件不在中心。这是我的电子邮件帐户（雅虎邮箱）的屏幕截图

enter image description here

它漂浮在左边。但是在HTML模板中，它已经将外部表的宽度设置为100％，

<table cellspacing="0" cellpadding="0" border="0" width="100%">

和650到内表，

<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="10" border="0" width="650" style="border:1px solid #E0E0E0;">

我应该设置其他任何东西吗？

这是来自app/locale/yourlanguage/template/email/sales/order_new.html

的整个HTML代码 
<body style="background:#F6F6F6; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
<div style="background:#F6F6F6; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
    <td align="center" valign="top" style="padding:20px 0 20px 0">
        <!-- [ header starts here] -->
        <table bgcolor="#FFFFFF" cellspacing="0" cellpadding="10" border="0" width="650" style="border:1px solid #E0E0E0;">
            <tr>
                <td valign="top"><a href="{{store url=""}}"><img src="{{var logo_url}}" alt="{{var logo_alt}}" style="margin-bottom:10px;" border="0"/></a></td>
            </tr>
        <!-- [ middle starts here] -->
            <tr>
                <td valign="top">
                    <h1 style="font-size:22px; font-weight:normal; line-height:22px; margin:0 0 11px 0;">Hello, {{htmlescape var=$order.getBillingAddress().getName()}}</h1>
                    <p style="font-size:12px; line-height:16px; margin:0 0 10px 0;">
                        Thank you for your order from {{var store.getFrontendName()}}.
                        Once your package ships we will send an email with a link to track your order.
                        If you have any questions about your order please contact us at <a href="mailto:{{config path='trans_email/ident_support/email'}}" style="color:#1E7EC8;">{{config path='trans_email/ident_support/email'}}</a> or call us at <span class="nobr">{{config path='general/store_information/phone'}}</span> Monday - Friday, 8am - 5pm PST.
                    </p>
                    <p style="font-size:12px; line-height:16px; margin:0;">Your order confirmation is below. Thank you again for your business.</p>
                </td>
            </tr>
            <tr>
                <td>
                    <h2 style="font-size:18px; font-weight:normal; margin:0;">Your Order #{{var order.increment_id}} <small>(placed on {{var order.getCreatedAtFormated('long')}})</small></h2>
                </td>
            </tr>
            <tr>
                <td>
                    <table cellspacing="0" cellpadding="0" border="0" width="650">
                        <thead>
                        <tr>
                            <th align="left" width="325" bgcolor="#EAEAEA" style="font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">Billing Information:</th>
                            <th width="10"></th>
                            <th align="left" width="325" bgcolor="#EAEAEA" style="font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">Payment Method:</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td valign="top" style="font-size:12px; padding:7px 9px 9px 9px; border-left:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA; border-right:1px solid #EAEAEA;">
                                {{var order.getBillingAddress().format('html')}}
                            </td>
                            <td>&nbsp;</td>
                            <td valign="top" style="font-size:12px; padding:7px 9px 9px 9px; border-left:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA; border-right:1px solid #EAEAEA;">
                                {{var payment_html}}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <br/>
                    {{depend order.getIsNotVirtual()}}
                    <table cellspacing="0" cellpadding="0" border="0" width="100%">
                        <thead>
                        <tr>
                            <th align="left" width="325" bgcolor="#EAEAEA" style="font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">Shipping Information:</th>
                            <th width="10"></th>
                            <th align="left" width="325" bgcolor="#EAEAEA" style="font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">Shipping Method:</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td valign="top" style="font-size:12px; padding:7px 9px 9px 9px; border-left:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA; border-right:1px solid #EAEAEA;">
                                {{var order.getShippingAddress().format('html')}}
                                &nbsp;
                            </td>
                            <td>&nbsp;</td>
                            <td valign="top" style="font-size:12px; padding:7px 9px 9px 9px; border-left:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA; border-right:1px solid #EAEAEA;">
                                {{var order.getShippingDescription()}}
                                &nbsp;
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <br/>
                    {{/depend}}
                    {{layout handle="sales_email_order_items" order=$order}}
                    <p style="font-size:12px; margin:0 10px 10px 0">{{var order.getEmailCustomerNote()}}</p>
                </td>
            </tr>
            <tr>
                <td bgcolor="#EAEAEA" align="center" style="background:#EAEAEA; text-align:center;"><center><p style="font-size:12px; margin:0;">Thank you again, <strong>{{var store.getFrontendName()}}</strong></p></center></td>
            </tr>
        </table>
    </td>
</tr>
</table>
</div>
</body>

1 个答案:

答案 0 :(得分：1)

Yahoo将电子邮件的内容包含在div中，该div具有display：table。

的样式 
<div style="display:table">
  YOUR EMAIL
</div>

这意味着您的外部表就像放置在未指定宽度的表格单元格内的表格一样，因此100％是该单元格的100％。因为你的内容只将该表推出650px，所以外表也是650px。

我能想到的唯一解决方案，虽然可能有其他方法，但是可以将一些文本内容放在表格之外。如果您可以在该显示中运行一行文本：table div（但不在固定宽度元素内），那么它将扩展该单元格以使其全部适合，并且您的表格的100％将变为100％。< / p>

更重要的是，我注意到所有电子邮件客户端呈现的电子邮件略有不同。如果它看起来不是真的错了，我可能会保持原样。试图在每个客户端看到相同的电子邮件是很难获得的。

相关问题
最新问题