标签: html-email

<center><a href="http://www.itbag.fr/newsletter/03022012/" style="color:#E84691;font-size:10px;">Si la newsletter s'affiche mal, consultez la en ligne</a>
<table id="Table_01" width="731" height="731" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="3" align="left" valign="top">
        <a href="http://www.itbag.fr" style="display:block;height:131px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_01.jpg" width="640" height="131" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <a href="https://www.facebook.com/Itbag.fr?sk=app_128552947241828" style="display:block;height:131px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_02.jpg" width="90" height="131" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="131" alt=""></td>
</tr>
<tr>
    <td colspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr" style="display:block;height:74px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_03.jpg" width="365" height="74" border="0" alt=""></a></td>
    <td colspan="2" rowspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr/sacs-d-occasion-de-marques/1130-sac_24h_gerard_darel_en_python_neuf.html" style="display:block;height:286px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_04.jpg" …

Run Code Online (Sandbox Code Playgroud)

html-table newsletter html-email

Rap*_*aël

2017 12-09

8
推荐指数

3
解决办法

1万
查看次数

在Outlook 2007,2010和2013中响应2列到1列电子邮件

我正在为移动设备优化HTML电子邮件.我的任务是找到一个通用的解决方案来创建一个2列到1列的响应式布局.我发现了一篇由Campaign Monitor撰写的文章 - http://www.campaignmonitor.com/guides/mobile/responsive/.我已经试过他们的标记,它适用于大多数用户和浏览器与Outlook 2007,2010年例外,和2013年我提供了我的标记以供参考的jsfiddle链接.有没有办法在这些版本的Outlook中使这个工作？

编辑:我不是试图使电子邮件的响应部分在Outlook中工作.我希望2个表(jsfiddle示例中的Left和Right)彼此相邻显示而不是堆叠在一起.这适用于Gmail(IE,FF,Chrome,Safari),AOL(IE,FF,Chrome,Safari),Yahoo(IE,FF,Chrome,Safari),Hotmail(IE,FF,Chrome,Safari),Apple Mail 4 &5,Outlook 2003,Android 4.0,iOS 4,5和6.我只关注Outlook 2007及更高版本的渲染引擎.

<html>
<head>
  <style>
    @media all and (max-width: 590px){
      *[class].responsive{ width: 320px !important; }
    }
  </style>
</head>
<body>
  <table width="100%" style="background-color: #000;" align="center" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td height="15"></td>
      </tr>
      <tr>
        <td width="100%">
          <table width="560" style="background-color: #fff;" align="center" cellpadding="0" cellspacing="0" class="responsive">
            <tbody>
              <tr>
                <td width="100%">
                  <table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
                    <tbody>
                      <tr>
                        <td width="100%" height="40" style="background-color: #ececec;">
                          <div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Left (top)</div>
                        </td>
                      </tr>
                    </tbody> …

Run Code Online (Sandbox Code Playgroud)

html mobile outlook html-email

Dou*_*ace

2012 10-18

8
推荐指数

1
解决办法

1万
查看次数

如何为一块html代码禁用基础或引导样式？

我使用mailgun(虽然这个问题与mailgun无关)来解析收到的电子邮件,而mailgun会将解析后的电子邮件发送到我的服务器.当我收到帖子时,我收到了多部分电子邮件的html代码.我想向我的用户显示html电子邮件,我正在使用rails,所以就像这样

<div>
  <%= raw(message.body_html) %>
</div>

Run Code Online (Sandbox Code Playgroud)

但是,它看起来与我在雅虎或hotmail中查看相同电子邮件时的情况有所不同(我知道不同的电子邮件客户端会以不同的方式显示html电子邮件,但我看起来完全不同).

以下是我自建客户端的外观: html电子邮件显示在我自建的客户端中

这就是雅虎在同一封电子邮件中的样子: 在雅虎的html电子邮件显示

我使用Zurb Foundation作为我的样式框架.但是,我认为电子邮件html带有自己的内嵌样式,我看看它看起来像它的代码,然后它应该看起来与其他客户端相似.

那么显示html电子邮件的最佳做法是什么,假设您获得了一块html代码并希望按原样显示它而不让其他框架覆盖其样式？

此外,是否可以为一段代码禁用Foundation(或用于此问题的twitter引导程序)样式,例如类似

<div>
  <% disable_foundation_styling begin %>
    <%= raw(message.body_html) %>
  <% end %>
</div>

Run Code Online (Sandbox Code Playgroud)

当然"disable_foundation_styling"只是我的想象力.

提前致谢!

!!!!!!!!! 2013年1月1日更新!!!!!!!!!!!!!!!

正如@Alex L.建议的那样,我试过但它并没有像预期的那样安静地工作.iframe像以前一样呈现视图中的所有内容(见下图),这是可以理解的,因为iframe内容只是另一个控制器的视图,在这种情况下rails也包含所有应用程序布局模板.但是,工具栏不是我最关心的问题,它在iframe中的内容与以前完全一样. 在此输入图像描述

我怀疑iframe可能不是这样做的.我看看gmail和yahoo的代码,他们不使用iframe.相反,他们使用非常深的嵌套来呈现html电子邮件.html电子邮件的部分具有相同的yahoo和gmail代码,除了yahoo为每个DOM元素插入自己的id.

所以现在我怀疑有一些基础样式会影响它的外观.

lio*_*nel

2013 01-02

8
推荐指数

1
解决办法

3542
查看次数

将电子邮件转换为html的工具

有没有一个工具可以将电子邮件(带有mime和附件的rfc822)转换为html？它可以是python/perl/java库/模块或命令行linux工具.我需要创建一个有效的HTML(即使电子邮件的某些部分不是那么有效).我不需要检查病毒和垃圾邮件,因为假定邮件已被清除.一个优点是检查明显危险的东西,如javascripts和远程图像,但我可以自己做一旦我有一个正确的HTML.

是的,有mhonarc,但它看起来有点过时,它会产生许多perl警告.

email html-email

Che*_*aKL

lucky-day

8
推荐指数

1
解决办法

2万
查看次数

如何在响应式电子邮件模板中堆叠列？

我试图在大屏幕上并排显示列并在移动设备上叠加显示但是我到目前为止无法实现,我尝试遵循ZURB在他们添加的模板上使用的相同方法到div浮动秒,然后清除在像小型设备的浮动:

<table>
    <tr>
        <td>
            <div class="column" style="float: left; width: 300px;">
                <!-- content -->
            </div>
            <div class="column" style="float: left; width: 300px;">
                <!-- content -->
            </div>
        </td>
    <tr>
</table>

Run Code Online (Sandbox Code Playgroud)

在我的<style>标签中:

@media screen and (max-device-width: 600px) {
    .column {
        width: auto !important;
        float: none !important;
        display: block !important;
    }
}

Run Code Online (Sandbox Code Playgroud)

它看起来几乎无处不在,但outlook.com显然剥离了css中的花车,所以它们不会在那里并排看.

我尝试做的事情是使用表格单元格而不是div像:

<table>
    <tr>
        <td width="300" align="left" class="column">
            <!-- content -->
        </td>
        <td width="300" align="left" class="column">
            <!-- …

Run Code Online (Sandbox Code Playgroud)

html email-client html-email responsive-design

Jav*_*eva

lucky-day

8
推荐指数

1
解决办法

1万
查看次数

iOS 10 Mail HTML无法正确响应

我正在创建一个时事通讯,我发现了一些奇怪的行为.

我有一个2里面的表,我希望它们是一个块和100%宽度,但发生以下情况:

它还打破了邮件的其他部分.我已经尝试了很多......每个视口,最大宽度,最小宽度,我不知道该怎么做......

我验证了,媒体查询正在运行

我需要一些特殊的黑客吗？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" style="box-sizing: border-box;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />    <meta name=”x-apple-disable-message-reformatting” />
    <meta property="og:title" content="*|MC:SUBJECT|*">
    <title>*|MC:SUBJECT|*</title>


    <style type="text/css">.inhalt li a {line-height:26px;}</style>


<style type="text/css">
body {
font-family: "Helvetica", "Arial";
}
img {
margin: 0; padding: 0; border: none;
}
body {
color: #000000; z-index: -3; font-family: "Helvetica", "Arial";
}
@media only screen and (max-width: 599px) {
  table[yahoo] {
    display: block; …

Run Code Online (Sandbox Code Playgroud)

html css newsletter html-email

Fri*_*ons

2017 01-07

8
推荐指数

1
解决办法

1274
查看次数