Html 电子邮件模板 - Outlook 忽略元素的宽度

标签 html css

我想问一下,如何强制 Outlook 遵守元素的宽度?

例如我在表中有一段代码:

<tr>
    <td width="100px" style="text-align: center">
        <div style="Margin-left: 20px;Margin-right: 20px;">
            <div class="divider" style="font-size: 2px;line-height: 2px;Margin-left: auto;Margin-right: auto;width: 40px!important;background-color: #ccc;Margin-bottom: 20px;">&nbsp;</div>
        </div>
    </td>
</tr>

divider 类的宽度为 40px,但在 outlook 中,div 的宽度为 100%,为什么?

最佳答案

电子邮件的 HTML 往往完全依赖于表格,因此您无法在 td 中包含 divs

然后您需要使用原始 width 属性和内联 css 指定单元格宽度:

<td width="40" style="width: 40px;">Cell content</td>

为了真正安全,您可以走得更远,包括一个透明的 1x1 像素图像,然后您可以使用它来强制调整单元格的宽度。例如:

<td width="40" style="width: 40px">
  <img src="blank.gif" width="40" style="width: 40px;" />
</td>

我会推荐阅读 Campaign Monitor's guidelines在用于电子邮件的 HTML 上。

关于Html 电子邮件模板 - Outlook 忽略元素的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37724527/

相关文章:

html - CSS 试图将列表和标题居中

css - 为什么 Chrome 无法像 IE 一样流畅地呈现此页面?

html - 如何使用 bootstrap 将网页分成两列?

javascript - JQuery 表排序问题 - 跳过列禁用第一次鼠标单击

javascript - jQuery Draggable 在拖动后应用多次点击

html - 内容 div 的多个背景图像

php - 如何使用 PHP 生成较浅/较深的颜色?

css - 在 JSF 面板标题中添加刷新图标

CSS3 多列

php - 如何迭代php文本框中的多行文本?