javascript Outlook电子邮件上的按钮问题

jdgnovmf  于 2023-11-15  发布在  Java
关注(0)|答案(2)|浏览(115)

我能够使按钮特定于outlook，但由于我的电子邮件包含不同的部分，使按钮得到 Package 在v：rect，现在它正在移动到电子邮件的顶部.请帮助
实际图像-x1c 0d1x
预期图像-

相关代码-

<!--[if mso]>
                </v:textbox>
                </v:rect>
            <![endif]-->
 <!--[if mso]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:730px;" height='auto'>
                <v:fill type="tile" src="" /> 
                <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">    
            <![endif]-->
            <div><div style="font-size:0;line-height:0;">    
            <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0; width: 100%; position: relative;">                       
                <tbody>                
                    <tr style="padding: 0; vertical-align: top; text-align: left;">                       
                        <th class="small-12 large-6 columns first " style="word-break: break-word; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; text-align: left; font-size: 16px; line-height: 1.3; margin: 0 auto; padding-bottom: 16px; max-width: 568px; width: 274px; padding-right: 8px; padding-left: 16px;">
                <table style="border-spacing: 0; border-collapse: collapse; padding: 0; vertical-align: top; text-align: left; width: 100%;">
                    <tbody>
                        <tr style="padding: 0; vertical-align: top; text-align: left;">
                            <th style="word-break: break-word; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; text-align: left; margin: 0; font-size: 16px; line-height: 1.3;">
                                <p style="Margin: 0 0 0 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; text-align: left; margin: 0; font-size: 16px; line-height: 1.3; margin-bottom: 10px; Margin-bottom: 10px;">asdasd</p>
                            </th>
                        </tr>
                    </tbody>
                </table>
            </th>
<th class="small-12 large-6 columns last " style="word-break: break-word; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; text-align: left; font-size: 16px; line-height: 1.3; margin: 0 auto; padding-bottom: 16px; width: 274px; padding-left: 8px; max-width: 568px; padding-right: 16px;">
                <table style="border-spacing: 0; border-collapse: collapse; padding: 0; vertical-align: top; text-align: left; width: 100%;">
                    <tbody>
                        <tr style="padding: 0; vertical-align: top; text-align: left;">
                            <th style="word-break: break-word; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; text-align: left; margin: 0; font-size: 16px; line-height: 1.3;">
                                <div class="editor-button" style="text-align: left;">
    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#empty" style="height: 40px;width: 120px;v-text-anchor: middle;position:relative;" arcsize="8%" strokecolor="#3165C5" fillcolor="#3165C5">
        <w:anchorlock/>
        <center style="color: #fff;font-family: Roboto,sans-serif;font-size: 14px;font-style: normal;text-decoration: none;font-weight: 400;text-transform: uppercase;">Button</center>
        </v:roundrect>
    <![endif]-->
    <!--[if !mso]> <!---->
        <a href="#empty" style="color: #fff;background-color: #3165C5;border-color: #3165C5;display: inline-block;text-decoration: none;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;font-style: normal;cursor: default;position: relative;top: 0;font-family: Roboto,sans-serif;text-transform: uppercase;font-size: 14px;width: 120px;line-height: 40px;border-radius: 3px;" target="_blank">Button</a>
    <!-- <![endif]--></div>
                            </th>
                        </tr>
                    </tbody>
                </table>
            </th>                       
                    </tr>                   
                </tbody>             
            </table>
            </div>
            </div>
            <!--[if mso]>
                </v:textbox>
                </v:rect>
            <![endif]-->

字符串
下面是完整的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width">
        <!-- Media queries are added in style block as Juice cannot inline them -->
        <style type="text/css"> @media only screen {
    html {
        min-height: 100%;
        background: #f3f3f3;
    }
    table.body {
        width: 100%; 
        margin: 0 auto;
    }

    center {
        width: 100%; 
        min-width: 0px !important;
    }

    table.body table.container {
        width: 100%; 
        max-width: 584px;
        table-layout: fixed;
        margin: 0 auto;
    }

    table.container img {
        max-width: 552px;
    }

    table.container table.row th {
        word-break: break-word;
    }

    table.container table.row img {
        max-width: 520px;
    }
}

@media only screen and (max-width: 596px) {
    .small-float-center {
        margin: 0 auto !important;
        float: none !important;
        text-align: center !important;
    }

    .small-text-center {
        text-align: center !important;
    }

    .small-text-left {
        text-align: left !important;
    }

    .small-text-right {
        text-align: right !important;
    }
}

@media only screen and (max-width: 596px) {
    .hide-for-large {
        display: block !important;
        width: auto !important;
        overflow: visible !important;
        max-height: none !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }
}

@media only screen and (max-width: 596px) {
    table.body table.container .hide-for-large,
    table.body table.container .row.hide-for-large {
        display: table !important;
        width: 100% !important;
    }
}

@media only screen and (max-width: 596px) {
    table.body table.container .callout-inner.hide-for-large {
        display: table-cell !important;
        width: 100% !important;
    }
}

@media only screen and (max-width: 596px) {
    table.body table.container .show-for-large {
        display: none !important;
        width: 0;
        mso-hide: all;
        overflow: hidden;
    }
}

@media only screen and (max-width: 596px) {
    table.body center {
        min-width: 0 !important;
    }

    table.body .container {
        width: 95% !important;
    }

    table.body .columns,
    table.body .column {
        height: auto !important;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    table.body .columns .column,
    table.body .columns .columns,
    table.body .column .column,
    table.body .column .columns {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    table.body .collapse .columns,
    table.body .collapse .column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    td.small-1,
    th.small-1 {
        display: inline-block !important;
        width: 8.33333% !important;
    }

    td.small-2,
    th.small-2 {
        display: inline-block !important;
        width: 16.66667% !important;
    }

    td.small-3,
    th.small-3 {
        display: inline-block !important;
        width: 25% !important;
    }

    td.small-4,
    th.small-4 {
        display: inline-block !important;
        width: 33.33333% !important;
    }

    td.small-5,
    th.small-5 {
        display: inline-block !important;
        width: 41.66667% !important;
    }

    td.small-6,
    th.small-6 {
        display: inline-block !important;
        width: 50% !important;
    }

    td.small-7,
    th.small-7 {
        display: inline-block !important;
        width: 58.33333% !important;
    }

    td.small-8,
    th.small-8 {
        display: inline-block !important;
        width: 66.66667% !important;
    }

    td.small-9,
    th.small-9 {
        display: inline-block !important;
        width: 75% !important;
    }

    td.small-10,
    th.small-10 {
        display: inline-block !important;
        width: 83.33333% !important;
    }

    td.small-11,
    th.small-11 {
        display: inline-block !important;
        width: 91.66667% !important;
    }

    td.small-12,
    th.small-12 {
        display: inline-block !important;
        width: 100% !important;
    }

    .columns td.small-12,
    .column td.small-12,
    .columns th.small-12,
    .column th.small-12 {
        display: block !important;
        width: 100% !important;
    }

    table.body td.small-offset-1,
    table.body th.small-offset-1 {
        margin-left: 8.33333% !important;
    }

    table.body td.small-offset-2,
    table.body th.small-offset-2 {
        margin-left: 16.66667% !important;
    }

    table.body td.small-offset-3,
    table.body th.small-offset-3 {
        margin-left: 25% !important;
    }

    table.body td.small-offset-4,
    table.body th.small-offset-4 {
        margin-left: 33.33333% !important;
    }

    table.body td.small-offset-5,
    table.body th.small-offset-5 {
        margin-left: 41.66667% !important;
    }

    table.body td.small-offset-6,
    table.body th.small-offset-6 {
        margin-left: 50% !important;
    }

    table.body td.small-offset-7,
    table.body th.small-offset-7 {
        margin-left: 58.33333% !important;
    }

    table.body td.small-offset-8,
    table.body th.small-offset-8 {
        margin-left: 66.66667% !important;
    }

    table.body td.small-offset-9,
    table.body th.small-offset-9 {
        margin-left: 75% !important;
    }

    table.body td.small-offset-10,
    table.body th.small-offset-10 {
        margin-left: 83.33333% !important;
    }

    table.body td.small-offset-11,
    table.body th.small-offset-11 {
        margin-left: 91.66667% !important;
    }

    table.body table.columns td.expander,
    table.body table.columns th.expander {
        display: none !important;
    }

    table.body .right-text-pad,
    table.body .text-pad-right {
        padding-left: 10px !important;
    }

    table.body .left-text-pad,
    table.body .text-pad-left {
        padding-right: 10px !important;
    }

    table.menu {
        width: 100% !important;
    }

    table.menu td,
    table.menu th {
        width: auto !important;
        display: inline-block !important;
    }

    table.menu.vertical td,
    table.menu.vertical th,
    table.menu.small-vertical td,
    table.menu.small-vertical th {
        display: block !important;
    }

    table.menu[align="center"] {
        width: auto !important;
    }

    table.button.small-expand,
    table.button.small-expanded {
        width: 100% !important;
    }

    table.button.small-expand table,
    table.button.small-expanded table {
        width: 100%;
    }

    table.button.small-expand table a,
    table.button.small-expanded table a {
        text-align: center !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    table.button.small-expand center,
    table.button.small-expanded center {
        min-width: 0;
    }
}
 </style>
    </head>
    <body style="min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; margin: 0; Margin: 0; text-align: left; font-size: 16px; line-height: 1.3; background: #f3f3f3; width: 100%;">
        <center style="width: 100%;">
        <table class="body" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; background: #f3f3f3; height: 100%; width: 100%; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; margin: 0 auto; Margin: 0 auto; text-align: left; font-size: 16px; line-height: 1.3;background-color: #f3f3f3">
            <!--[if mso]>
                <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
                    <v:fill type="tile" color=#f3f3f3 src=/>
                </v:background>
            <![endif]-->
            <tr style="padding: 0; vertical-align: top; text-align: left;">
                <td class="float-center" align="center" valign="top" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vertical-align: top; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; font-size: 16px; line-height: 1.3; margin: 0 auto; Margin: 0 auto; float: none; text-align: center; border-collapse: collapse;">
                    <center style="width: 100%;">
                        <table class="container" style="border-spacing: 0; border-collapse: collapse; padding: 0; vertical-align: top; background: #fefefe; width: 100%; margin: 0 auto; text-align: inherit; max-width: 584px;">
                            <tr style="padding: 0; vertical-align: top; text-align: left;">
                                <td style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vertical-align: top; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; margin: 0; Margin: 0; text-align: left; font-size: 16px; line-height: 1.3; border-collapse: collapse;">
                                     <!--[if mso]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:730px;" height='auto'>
                <v:fill type="tile" src="" /> 
                <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">    
            <![endif]-->
            <div><div style="font-size:0;line-height:0;">    
            <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0; width: 100%; position: relative;">                       
                <tbody>                
                    <tr style="padding: 0; vertical-align: top; text-align: left;">                       
                        <th class="small-12 large-12 columns first last " style="word-break: break-word; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; text-align: left; font-size: 16px; line-height: 1.3; margin: 0 auto; padding-bottom: 16px; width: 560px; padding-left: 16px; padding-right: 16px; max-width: 552px;">
                <table style="border-spacing: 0; border-collapse: collapse; padding: 0; vertical-align: top; text-align: left; width: 100%;">
                    <tbody>
                        <tr style="padding: 0; vertical-align: top; text-align: left;">
                            <th style="word-break: break-word; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; text-align: left; margin: 0; font-size: 16px; line-height: 1.3;">
                                <p style="Margin: 0 0 0 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; text-align: left; margin: 0; font-size: 16px; line-height: 1.3; margin-bottom: 10px; Margin-bottom: 10px;">asdasd</p>
                            </th>
                        </tr>
                    </tbody>
                </table>
            </th>                       
                    </tr>                   
                </tbody>             
            </table>
            </div>
            </div>
            <!--[if mso]>
                </v:textbox>
                </v:rect>
            <![endif]-->
 <!--[if mso]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:730px;" height='auto'>
                <v:fill type="tile" src="" /> 
                <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">    
            <![endif]-->
            <div><div style="font-size:0;line-height:0;">    
            <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0; width: 100%; position: relative;">                       
                <tbody>                
                    <tr style="padding: 0; vertical-align: top; text-align: left;">                       
                        <th class="small-12 large-6 columns first " style="word-break: break-word; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; text-align: left; font-size: 16px; line-height: 1.3; margin: 0 auto; padding-bottom: 16px; max-width: 568px; width: 274px; padding-right: 8px; padding-left: 16px;">
                <table style="border-spacing: 0; border-collapse: collapse; padding: 0; vertical-align: top; text-align: left; width: 100%;">
                    <tbody>
                        <tr style="padding: 0; vertical-align: top; text-align: left;">
                            <th style="word-break: break-word; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; text-align: left; margin: 0; font-size: 16px; line-height: 1.3;">
                                <p style="Margin: 0 0 0 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; text-align: left; margin: 0; font-size: 16px; line-height: 1.3; margin-bottom: 10px; Margin-bottom: 10px;">asdasd</p>
                            </th>
                        </tr>
                    </tbody>
                </table>
            </th>
<th class="small-12 large-6 columns last " style="word-break: break-word; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; text-align: left; font-size: 16px; line-height: 1.3; margin: 0 auto; padding-bottom: 16px; width: 274px; padding-left: 8px; max-width: 568px; padding-right: 16px;">
                <table style="border-spacing: 0; border-collapse: collapse; padding: 0; vertical-align: top; text-align: left; width: 100%;">
                    <tbody>
                        <tr style="padding: 0; vertical-align: top; text-align: left;">
                            <th style="word-break: break-word; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; text-align: left; margin: 0; font-size: 16px; line-height: 1.3;">
                                <div class="editor-button" style="text-align: left;">
    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#empty" style="height: 40px;width: 120px;v-text-anchor: middle;position:relative;" arcsize="8%" strokecolor="#3165C5" fillcolor="#3165C5">
        <w:anchorlock/>
        <center style="color: #fff;font-family: Roboto,sans-serif;font-size: 14px;font-style: normal;text-decoration: none;font-weight: 400;text-transform: uppercase;">Button</center>
        </v:roundrect>
    <![endif]-->
    <!--[if !mso]> <!---->
        <a href="#empty" style="color: #fff;background-color: #3165C5;border-color: #3165C5;display: inline-block;text-decoration: none;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;font-style: normal;cursor: default;position: relative;top: 0;font-family: Roboto,sans-serif;text-transform: uppercase;font-size: 14px;width: 120px;line-height: 40px;border-radius: 3px;" target="_blank">Button</a>
    <!-- <![endif]--></div>
                            </th>
                        </tr>
                    </tbody>
                </table>
            </th>                       
                    </tr>                   
                </tbody>             
            </table>
            </div>
            </div>
            <!--[if mso]>
                </v:textbox>
                </v:rect>
            <![endif]-->
                                </td>
                            </tr>
                        </table>
                    </center>
                </td>
            </tr>
        </table>
    </center>
    <!-- prevent Gmail on iOS font size manipulation -->
   <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
  </body>
</html>

型

JavaScript

2条答案

按热度按时间
2skhul33

2skhul331#

我也在电子邮件开发工作.如果我们创建按钮，我们在网页中创建它将不会显示正确的布局在Outlook中.所以我这样的按钮代码.

<table class="center-align" cellspacing="0" cellpadding="0" border="0" align="center" width="250">
        <tr>
            <td class="btn-table" style="background-color:#ffffff;border:1px solid #ffffff;padding:17px 25px;color:#003580;font-size:16px;font-family:Arial,Helvetica,sans-serif;" bgcolor="#003580">
                <a href="#" class="btn-style" style="font-size:16px;font-family:Arial,Helvetica,sans-serif;color:#003580;text-align:right;text-decoration:none;display:block;background-color:#ffffff;" title="">Button</a>
            </td>
        </tr>
</table>

字符串
在td块中编写此代码，在此代码中您希望显示相应的按钮样式。还有一件事，只有当用户单击按钮的文本时，用户才能单击它。因为按钮样式应用于锚的父td标记。

赞(0）分享  回复(0）举报  2023-11-15
wf82jlnq

wf82jlnq2#

这里的问题是你试图在v:rect里面显示v:roundrect。嵌套的VML形状不起作用，你必须去掉外部的v:rect或者使用一个不使用VML的基于表格的“文本按钮”。

赞(0）分享  回复(0）举报  2023-11-15
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com