我是一名业余程序员，正在为一项服务开发电子邮件模板，该模板在所有相关客户端上应该看起来很专业，但大多数客户端都使用 Outlook。这是我目前所有问题的根源，因为我需要使用 MSO 注释做出很多妥协，才能让内容看起来非常接近良好。 我现在面临的是无法更改 mso 注释中 div 的填充大小。我已经尝试过所有我能想到的单元和解决方案来实现这一目标，但它对我不起作用。如果我能得到任何帮助，我将不胜感激。
<!doctype html>
<html lang="cs">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>titulek</title>
<style>
* {
font-family: Arial, Helvetica, sans-serif;
line-height: inherit;
max-width: 600px;
margin: 0 auto;
padding: 0;
}
table {
text-align: center;
}
.title {
text-align: left;
background-color: dodgerblue;
color: white;
border-radius: 10px;
padding: 12px;
margin-top: 25px;
margin-bottom: 25px;
}
.main-text {
text-align: left;
width: 90%;
margin-bottom: 25px;
}
.button {
cursor: pointer;
border: 1px solid darkgray;
border-radius: 5px;
padding: 8% 0;
margin: 2%;
min-width: 100px;
white-space: nowrap;
}
hr {
border: 1px solid darkgray;
margin-top: 20px;
margin-bottom: 10px;
}
.automated-warning {
width: 90%;
font-size: small;
text-align: end;
}
</style>
<!--[if mso]>
<style>
.button {
padding: 1.6em 0 !important;
}
</style>
<![endif]-->
</head>
<body>
<table width="100%" border="0">
<thead>
<tr>
<td colspan="4">
<img src="https://apac-production-wp.s3.ap-southeast-2.amazonaws.com/app/uploads/2017/08/19083003/logo-placeholder-1.png" width="200px">
</td>
</tr>
<tr>
<td colspan="4">
<div class="title">
<h1>
<!--[if mso]>
<![endif]-->
Title
</h1>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<!--[if mso]>
</tr>
<table>
<tr>
<td width="5%">
</td>
<![endif]-->
<td colspan="4">
<div class="main-text" style="color: black;">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><br> Nam veritatis fugiat doloremque iste ut corporis explicabo libero quae et aliquam quasi natus esse facere rerum voluptatibus, <br>magni voluptate maxime dolorem? <br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse nesciunt, tenetur dolore at natus consectetur pariatur, vitae cumque saepe fuga quasi exercitationem incidunt libero velit unde veniam minima! Obcaecati, officiis.
</div>
</td>
<!--[if mso]>
<td width="5%">
</td>
</tr>
</table>
<table>
<![endif]-->
</tr>
<tr>
<!--[if mso]>
<td width="15%">
</td>
<![endif]-->
<td width="40%">
</td>
<td colspan="1" style="min-width: 120px;">
<!--[if mso]>
</td>
<td width="20%" style="mso-line-height-rule:exactly;line-height:1px; mso-text-raise:-5px"">
<![endif]-->
<a href="_blank" style="text-decoration: none;">
<div class="button" style="color: dodgerblue;">
button 1
</div>
</a>
</td>
<td colspan="1" style="min-width: 120px;">
<!--[if mso]>
</td>
<td width="20%" style="mso-shading:dodgerblue;mso-line-height-rule:exactly;line-height:1px; mso-text-raise:-5px"">
<![endif]-->
<a href="_blank" style="text-decoration: none;">
<div class="button" style="color: white; background-color: dodgerblue;">
button 2
</div>
</a>
</td>
<td width="4%">
</td>
<!--[if mso]>
<td width="5%">
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="100%"">
<tr>
<![endif]-->
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<hr>
<div class="automated-warning">
<!--[if mso]>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="95%" style="text-align: right; font-size: 13px">
<tr>
<td>
<![endif]-->
<i style="color: darkgray;">
automated warning
</i>
</div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
我无法上班的部分：
<!--[if mso]>
<style>
.button {
padding: 1.6em 0 !important;
}
</style>
<![endif]-->
我需要这种情况发生的原因是因为这个按钮大小在 Web Outlook 和其他相关客户端中看起来完全没问题，但旧客户端将其变成丑陋的矩形。然后，如果我使用像 em 这样的其他单位，它又不对应 - 0.8em对于 Web 来说是一个合适的尺寸，但是 1.6em 的客户端看起来不错。 谢谢您的任何建议。
我尝试使用基本上任何现有的单位。
Outlooks 使用 Word 作为渲染引擎。而且Word 不太擅长渲染HTML 和CSS。特别是，在您的情况下，Word 仅支持某些 HTML 元素上的特定 CSS 属性。例如，仅
padding<td><td>因此，虽然您的条件注释代码在语法上是正确的，但它不会工作，因为 Outlook 引擎本身不支持
paddingdivdiva以下是适用于 Windows 上 Outlook 的按钮代码示例：
<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="center" style="margin:0 auto; max-width:100%; background:#fff; border-radius:5px; overflow:hidden; border:1px solid darkgray; border-collapse:separate;">
<tr>
<td height="48" style="mso-padding-alt:0 16px; text-align:center;">
<a href="https://www.example.com" target="_blank" style="display:block; min-width:160px; padding:13px 16px; color:#1e90ff; font:16px/20px Arial, sans-serif; text-decoration:none; text-align:center;">Call to Action</a>
</td>
</tr>
</table>
如果您想使用专用框架，MJML 通常会受到开发人员的赞赏（https://mjml.io/）。