问题标签 [zurb-ink]

I am using a Zurb Ink template to send an email. When I view the email in mailcatcher (from the development server) everything looks fine, but when I receive an email from the production server (to my gmail account), all of the CSS styling is gone.

The CSS is all inline, and I am using the basic template from Zurb.

我正在尝试使用 Zurb Ink 创建一个响应式电子邮件布局，该布局使用面板类来调用电子邮件中的一些重要项目。在大多数情况下，它在测试中正确显示（使用 Litmus），但在某些 Android 设备上除外。表格向右延伸到屏幕的可视区域之外。为了使电子邮件在尽可能多的设备上正确显示，我使用了一个非常简单的布局......每个表格中的单个列。

我正在使用http://zurb.com/ink/来构建我的电子邮件模板，但我需要在电子邮件边缘有一个 10 像素的边框。

当我尝试使用名为 .box-edge 的类（这是一个自定义类）向电子邮件添加填充时，它会添加填充，但是当屏幕调整大小时，图像不会正确调整大小。

这是一个小提琴来说明我的意思：http: //jsfiddle.net/daimz/xspWL/2/

这是代码：

HTML：

CSS：

我想知道为什么在发送电子邮件时最喜欢使用表格。

编辑：

我正在研究来自http://zurb.com/ink/的模板，发现所有东西都有表格。我喜欢使用 bootstrap，并且看到 Zurb Ink 具有与 bootstrap3 相似的功能（例如响应性）。但是，所有模板中都有表格。

因此，我开始研究是否可以将 bootstrap 3（至少 CSS）应用于要使用 PHP 发送的 HTML 邮件。我偶然发现一些文章说桌子是最好的选择。但是，我不明白为什么。

编辑：

另一个帮助我的帖子：为什么 HTML 电子邮件中使用表格？. 感谢@dystroy。

另一篇关于邮件样式的综合文章：http: //mailchimp.com/resources/guides/email-marketing-field-guide/。

最好的！

我意识到我的电子邮件仍然没有响应 zurb 电子邮件框架，墨水。因此，我尝试了下载中的示例 html 并运行了内联工具。示例内容也向右倾斜。我错过了什么？这是屏幕截图。对不起，我太新了，所以不能在这里发布图片。

https://dl.dropboxusercontent.com/u/22545218/Screenshot_2014-01-14-19-47-45.png

根据请求，添加源代码。我在这里没有做任何改变。它直接来自下载。

https://dl.dropboxusercontent.com/u/22545218/basic.html

谢谢，

在创建 HTML 电子邮件时，我使用的是 Zurb Ink 框架。

我有一个面板，我想在面板内显示几条水平线。例如：

哪里有一个用于分配/未分配和文本跟随的按钮。

在这段代码中，我在面板内成功创建了面板和按钮。但是，我无法让按钮只占用两列。如何使按钮仅占用 2 列，然后在按钮后显示文本？

我正在使用 Zurb Ink 制作 html 电子邮件。使用面板，它在浏览器中看起来是正确的，宽度为 601 像素。但是在 Safari OS（Mac book）上的前景中，面板一直延伸到电子邮件（如页脚或页眉）。

Safari 中的前景应该是这样吗？还是我的代码有问题？

我正在处理一封电子邮件，其中一些文本下方有一个按钮，右侧是产品图像。

代码：http: //jsfiddle.net/uw4Xz/

我在这里找到了一个答案，证实了我怀疑需要使用子网格：

Zurb Ink 按钮不尊重面板中的 2 列

但是，该示例在按钮右侧有文本。我希望我的按钮是当前宽度的一半，但右侧没有文字。按钮上方的段落应保持原样。

我希望这很清楚！

我正在尝试从下面将桌子的边缘弄圆，但它以错误的方式四舍五入我该怎么办

这是我尝试的结果。中间也是圆的。我应该怎么做才能使它只在边缘变圆

从电子邮件生成 PDF（Zurb Ink 模板）；但总是呈现单页 PDF。

可运行的测试用例：

如何获得多页 PDF？