【问题标题】:Newsletter with table inside table: padding not working表内表时事通讯:填充不起作用
【发布时间】:2011-11-29 16:39:09
【问题描述】:

我收到了这个时事通讯http://jsfiddle.net/n5cGm/

使用容器 div 将新闻通讯居中并为其提供背景图片,

好的,我们在发送时遇到了一些问题,它由(浏览器)更改

到(Outlook):检查标志位置;甚至不打扰边界半径。仅适用于支持它的浏览器;不重要也不重要。

这是第二个(暂时错误)版本,我正在尝试使用表格中的表格:

http://jsfiddle.net/9dchU/1/

在 Firefox 中可以正常工作,但在 jsfiddle 中没有嵌入,在 Outlook 中看起来几乎相同...

你能看到弄乱填充的样式吗?

【问题讨论】:

    标签: css html-email padding newsletter


    【解决方案1】:

    由于某些浏览器,某些电子邮件客户端无法显示border-radius 参数。我建议,使用图像作为白色背景。

    【讨论】:

    • 边界半径并不重要。它仅适用于支持它的浏览器。感谢您的评论,但我认为这不是问题的答案..
    【解决方案2】:

    我会从头开始。您似乎有一个未关闭、多余或无用的标签。让我解释一下,在电子邮件中使用 tbody 或 th 标签是没有意义的。每次我测试时,它们都会导致设计出现裂痕。你的设计其实很简单。你想做的是这样的:

    <table cellpadding="0" cellspacing="0" border="0" style="font: Arial;">
    <tr><td>
    <img src="http://domain.com/top-image.gif" />
    </td></tr>
    <tr><td bgcolor="#ffffff" style="padding: 20px">
    text text text
    </td></tr>
    <tr><td>
    <img src="http://domain.com/bottom-image.gif" />
    </td></tr>
    </table>
    

    请勿在电子邮件中使用背景图片,因为它们不受支持。

    你可以这样做:

    看看上面的图片。忘记你要水平裁剪成 3 片的四个角。

    顶部将是您的 top-image.gif

    中间你可以丢弃,那是你的文本应该去的地方。

    最后,底部切片将是您的 bottom-image.gif

    希望这会为您指明正确的方向。

    【讨论】:

    • 请检查我的编辑和对其他答案的评论。边界半径并不重要。不过谢谢!
    • 然后忘记桌子半径,看看我是如何布置桌子的。这应该可以解决您的风格问题。
    • 我已经在使用 cellpadding="0" cellspacing="0" border="0"
    • 这并不重要。查看表结构本身。不要使用 tbody 和 th。这是一个很好的电子邮件表格教程:campaignmonitor.com/blog/post/2491/…
    • 我看不出你的代码有什么帮助......它是一个有 3 行的表格:S 无论如何谢谢
    猜你喜欢
    • 2012-10-09
    • 2014-03-18
    • 1970-01-01
    • 2017-10-18
    • 2019-11-22
    • 2017-05-05
    • 1970-01-01
    • 2020-03-04
    • 2013-06-29
    相关资源
    最近更新 更多