Question

我正在为我的公司设计一些电子邮件模板，并利用Zurb Foundation for Email框架（http://foundation.zurb.com/emails）。到目前为止，我对它印象深刻。

我遇到的问题是列背景，其中包含不同的文本，具体取决于收件人（动态）。背景基本上是圆形的“按钮”形状，右侧有透明的“箭头”。长话短说 - 我能够设计这个，所以在现代电子邮件客户端看起来“好”使用一些基本CSS的表。

这个问题是我的CSS使用“border-radius”而outlook不支持。我找到了一个解决方法，并专门“简化”了Outlook的设计，并使用MSO条件在适当的时候启动这个简化的设计。问题是它总是似乎无论如何 - 无论我使用什么电子邮件客户端。。。（iPhone，gMail等）。我认为设置条件的方式有些不对。

<table class="row center">
<tr>
    <td class="wrapper last panel">
        <!--[if mso]>
        <table class="twelve columns">
            <tr>
                <td class="one sub-columns">
                    Gift Code:
                </td>
                <td class="eleven sub-columns">
                  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:40px; v-text-anchor:middle; width:500px;" arcsize="20%" stroke="f" fillcolor="#faa21a">
                    <w:anchorlock/>
                    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
                        ZZ1234567890ABCD
                    </center>
                  </v:roundrect>
                </td>       
                <td class="expander"></td>
            </tr>
        </table>
        <![endif]-->
        <!--[if !mso]>
        <!-- -->
        <table class="twelve columns" style="mso-hide:all;">
            <tr>
                <td class="one sub-columns">
                    Gift Code:
                </td>
                <td class="nine sub-columns promoCalloutInner alOrangeBg" style="mso-hide:all;">
                    ZZ1234567890ABCD
                </td>
                <td class="four sub-columns alOrangeBg promoCalloutInnerEnd" style="mso-hide:all;">
                    <img src="http://mcbain.gamelogic.com/~rdesroches/ALCEmailTemplates/images/transparentArrow.png" />
                </td>
                <td class="expander"></td>
            </tr>
        </table>
        <!-- <![endif]-->
    </td>
  </tr>
</table>

我使用Zurb Inliner工具（http://foundation.zurb.com/emails/inliner.html）来内联CSS中的所有样式。

有什么想法吗？

Answer 1

看起来您的非Outlook条件内容（<!--[if !mso]>）未正确关闭。

试试这个并让我知道你是如何进行的

<table class="row center">
<tr>
    <td class="wrapper last panel">
        <!--[if mso]>
        <table class="twelve columns">
            <tr>
                <td class="one sub-columns">
                    Gift Code:
                </td>
                <td class="eleven sub-columns">
                  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:40px; v-text-anchor:middle; width:500px;" arcsize="20%" stroke="f" fillcolor="#faa21a">
                    <w:anchorlock/>
                    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
                        ZZ1234567890ABCD
                    </center>
                  </v:roundrect>
                </td>       
                <td class="expander"></td>
            </tr>
        </table>
        <![endif]-->
        <!--[if !mso]><!-->
        <table class="twelve columns" style="mso-hide:all;">
            <tr>
                <td class="one sub-columns">
                    Gift Code:
                </td>
                <td class="nine sub-columns promoCalloutInner alOrangeBg" style="mso-hide:all;">
                    ZZ1234567890ABCD
                </td>
                <td class="four sub-columns alOrangeBg promoCalloutInnerEnd" style="mso-hide:all;">
                    <img src="http://mcbain.gamelogic.com/~rdesroches/ALCEmailTemplates/images/transparentArrow.png" />
                </td>
                <td class="expander"></td>
            </tr>
        </table>
        <!--<![endif]-->
    </td>
  </tr>
</table>

我改变了什么：

<!--[if !mso]>
        <!-- -->

到

<!--[if !mso]><!-->

和

<!-- <![endif]-->

到

<!--<![endif]-->

MSO条件 - ！mso失败了吗？

1 个答案: