一些基于Web的客户端中的电子邮件中断

问题描述

我是电子邮件设计的新手。我连续有一张图片,一些文字一个按钮。在移动设备上查看时,图像必须是静态的,并且按钮必须位于文本下方。因此,图片文字+按钮必须并排放置。我用过div和嵌套的div。它可以在移动设备上正常工作。但是,在某些基于Web的邮件客户端(例如AOL,Yahoo和Gmail)上,布局已中断。在comcast和Outlook Web上正常工作。不知道我在做什么错。请帮忙。

在comcast网络上正确呈现。

Correctly rendered on comcast web.

在基于Yahoo Web的邮件上呈现不正确。

Incorrectly rendered on Yahoo web based mail.

这是我使用的代码

error[E0597]: `callback` does not live long enough
>  | impl<'a> Data<'a> {  
>  |      -- lifetime `'a` defined here  
>  |     fn mut_func<F: FnMut(u32) -> () + 'a>(&mut self,mut callback: F) {  
>  |         self.o.push(&mut callback as &mut dyn FnMut(u32) -> ());  
>  |         ------------^^^^^^^^^^^^^------------------------------  
>  |         |           |  
>  |         |           borrowed value does not live long enough  
>  |         argument requires that `callback` is borrowed for `'a`  
>  |     }  
>  |     - `callback` dropped here while still borrowed  
use std::any::Any;
use std::mem;
use std::rc::Rc;
use std::cell::RefCell;

struct Event<'a> {
    obs: Vec<&'a mut dyn FnMut(u32) -> ()>,}

impl<'a> Event<'a> {
    fn subscriber<F: FnMut(u32) -> () + 'a>(&mut self,mut callback: F) {
        self.o.push(&mut callback as &mut dyn FnMut(u32) -> ());
    }
}

fn main () {
    let mut e = Event {obs: Vec::new()};
    let x = 3;
    e.subscriber(|n| {x+n;});
}

解决方法

我在玩您的代码,看来您在以下一行上缺少width:100%;

<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px;" class="stack-column-2half mobile-padding1">

添加后,联系人链接将返回与 John Smith 标题标题相同的行。

您可以尝试下面的代码,看看它是否适合您。我必须在表格行周围添加表格代码,以使渲染正常工作。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
                    <tr>
                    <!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
                    <td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; background-color: #ffffff;">
                        
                        <!--[if mso]>
                        <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" style="width: 600px;">
                        <tr>
                        <td valign="top" width="200" style="width: 200px;">
                        <![endif]-->
                        <div style="display:inline-block; margin: 0 -1px; max-width: 200px; min-width:80px; vertical-align:top; width:100%;" class="stack-column-half">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr>
                                    <td dir="ltr" style="padding: 0 10px 10px 10px;">
                                        <img src="https://aishvaryarastogi.worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" width="180" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 180px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; border-radius: 10px;">
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--[if mso]>
                        </td>
                        <td valign="top" width="400" style="width: 400px;">
                        <![endif]-->
                        <div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px;width:100%;" class="stack-column-2half mobile-padding1">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr>
                                    <td dir="ltr" style="font-family:'Open Sans',Arial,sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 0px 0; text-align: left;" class="center-on-narrow fallback-text mobile-padding1">
                                        <!--[if mso]>
                                        <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="400">
                                        <tr>
                                        <td valign="middle" width="200">
                                        <![endif]-->
                                        <div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding: 0 0px;" class="stack-column" align="left">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                                <tr>
                                                    <td style="padding: 0 20px;" class="mobile-padding1">
                                                        <h2 style="margin: 0 0 10px 0; font-family:'Open Sans',sans-serif; font-size: 15px; line-height: 18px; color: #333333; font-weight: bold;">John Smith</h2>
                                                        <p style="margin: 0 0 10px 0;">Title,title</p>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <!--[if mso]>
                                        
                                        </td>
                                        <td valign="middle" width="200">
                                        <![endif]-->
                                        <div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding-top:0 0px; " class="stack-column mobile-padding1">
                                        <!-- Button : BEGIN -->
                                            <!--[if mso]>
                                                    <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="https://google.com/" style="height:45px;v-text-anchor:middle;width:150px;" arcsize="50%" stroke="false" fillcolor="#32C2EE">
                                                    <w:anchorlock/>
                                                    <center style="color:#333333;font-family:'Open Sans',sans-serif;font-size:15px;">Contact</center>
                                                    </v:roundrect>
                                                    <![endif]-->
                                            <!--[if !mso]> <!-->
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0"  style="float:none;" align="left">
                                                <tr>
                                                    <td class="button-td button-td-primary" style="border-radius: 30px; background: #ffffff;">
                                                        <a class="button-a button-a-primary fallback-text" href="https://google.com/" style="background: #32C2EE; border: 0px solid #000000; font-family:'Open Sans',sans-serif; font-size: 15px; font-weight: bold; line-height: 15px; text-decoration: none; padding: 18px 55px; color: #333333; display: block; border-radius: 30px;">Contact</a>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!-- <![endif]-->
                                        <!-- Button : END -->
                                        </div>
                                        <!--[if mso]>
                                        </td>
                                        </tr>
                                        </table>
                                        <![endif]-->
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
                    
                    </td>
                </tr>
                <!-- Thumbnail Left,Text Right : END -->
  </tbody>
</table>