设置 Outlook html 电子邮件中控件的高度

问题描述 投票：0回答：1

我正在尝试设置锚标记的高度，我将其样式设置为 Outlook html 电子邮件中的按钮。我可以在 Web 浏览器中执行几乎所有我想做的操作，但是当我在 Outlook 365 中打开 html 时，它不起作用。我可以通过在标题中添加一些 

 
来更改锚标记的宽度，但我还没有找到操纵高度的方法。

这里有一些重现问题的 html：

<!doctype html>
<html>
    <head>
        <title>Test Table Styling</title>
    </head>
    <body>
        <div width=1920px
             height=1652px>
            <div width=512px
                 height=48px
                 style="flex-shrink:0;background:#00A7E1;">
                <div style="">Blah blah blah</div>
            </div>
            <div width=386px
                 height=16px
                 top=323px
                 left=767px
                 style="">
                                            Hello:</div>
            <br/>
            <table style="">
                <tr style="">
                    <th>Header</th>
                    <th>Header</th>
                    <th>Header</th>
                    <th>Header</th>
                </tr>
                <tr>
                    <td>8/12/2022</td>
                    <td>8/12/2022</td>
                    <td>8/12/2022</td>
                    <td>8/12/2022</td>
                </tr>
                <tr>
                    <td>7/27/2022</td>
                    <td>7/27/2022</td>
                    <td>7/27/2022</td>
                    <td>7/27/2022</td>
                </tr>
            </table>
            <br/>
            <div style='text-align:center'>
                <div style="text-align:center">
                    <a style="display:inline-block;width:150px;height:100px;background:#1572BA;padding:10px;text-align:center;border-radius:5px;color:#FFFFFF;font-weight:bold;line-height:32px;text-decoration:none;"
                   href='https://localhost'>Blah blah blah</a>
            </div>
            </div>
            <br/>
            <br/>
            <div style="text-align:center;">lorum lbljdlfkjalkjfdslaksjdflkj</div></div>
    </body>
</html>

caniemail.com 看起来我如果在 20 年前尝试这样做会更好：

html css email outlook html-email
1个回答
1
投票

在 Outlook 中，您需要的高度是一个 hack。那是因为它不监听显示变化。如果默认情况下它是内联元素，那么它将始终如此。所以内容需要填充它，让它更高（或更宽，就像你所做的那样）。

对于高度控制，我们可以介绍一下这个野兽：

<!--[if mso]>
<i style="mso-text-raise:100%" hidden>&emsp;</i>
<span style="mso-text-raise:50%;"><![endif]-->
  My link text
<!--[if mso]></span><![endif]-->

第一个文本凸起将是顶部填充，第二个文本凸起将是底部填充。如果你已经有了宽度，你可以使用 

&nbsp;
而不是 
&emsp;
但我相信文本提升是一个缩放的事情。因此，按照目前的情况，100% 是纯 1em，50% 是 0.5em。

由马克·罗宾斯提供 https://www.goodemailcode.com/email-code/link-button.html

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.