HTML 电子邮件 header 未按应有的方式定位-6ren

HTML 电子邮件 header 未按应有的方式定位

转载作者：行者123 更新时间：2023-11-28 06:24:42

25

4

我被要求编写一个 html 邮件(用于邮寄事件)。除了以下代码，我已经完成了所有工作。我尝试做的是在顶部添加其他元素的图像，如标题、按钮、 Logo ...我拥有所有这些(不是注释行)，但为了使其响应，我必须进行一些更改(注释行)，然后布局完全困惑了。为了让它更具挑战性，在 outlook 中观看(即使是未注释的行)也是非常可怕的，所以最好有一个解决方案(outlook 似乎去除了所有定位属性)

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Title</title>
    <style>
        @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
        html {
            font-family: 'Open Sans',sans-serif; 
            font-size: 13px; 
            line-height: 20px; 
            /*color: #87888a; */
            color: #00000;
            letter-spacing: 0,5px;
        }
        #headertable {
            border-bottom: 5px solid #E40520; 
            position: relative;
            max-width: 600px;
        }
        .absolutepos {
            position: absolute; 
            left: 0; 
            right: 0; 
            bottom: 0;
        }
        #invitation {
            color: #ffffff; 
            text-transform: uppercase; 
            padding:5px 23px 5px 15px; 
            font-size: 24px; 
            border-radius: 0 5px 5px 0;  
            -webkit-border-radius: 0 5px 5px 0; 
            -moz-border-radius: 0 5px 5px 0; 
            background-color: #E40520; 
            border: solid #E40520; 
            display: inline-block; 
            letter-spacing: 2px;
        }
        h1 {
            font-size: 30px; 
            line-height: 24px; 
            color: #ffffff; 
            font-weight: normal; 
            text-transform: uppercase; 
            letter-spacing: 1px;
            margin: 0;
            padding: 0;
        }
        h2 {
            font-size: 20px; 
            line-height: 24px; 
            color: #ffffff; 
            font-weight: normal; 
            text-transform: uppercase; 
            letter-spacing: 1px;
            margin: 20px 0 0 0;
            padding: 0;
        }
        .submit-button {
            padding:7px 12px; 
            text-decoration: none; 
            border-radius:5px; 
            -webkit-border-radius:5px; 
            -moz-border-radius:5px; 
            background:rgba(255,255,255,0.5); 
            /*border:solid #87888A;*/ 
            display:inline-block; 
            font-size: 18px; 
            line-height: 24px; 
            color: #ffffff;
            text-transform: uppercase; 
            letter-spacing: 1px;
            transition: background .2s ease-in-out, color .2s ease-in-out;
        }
        .submit-button:hover {
            background: #E40520;
        }
    </style>
</head>
<body bgcolor="#eeeeee">
<table border="0" cellspacing="0" cellpadding="0" align="center" width="600" height="290" id="headertable">
<!--<table border="0" cellspacing="0" cellpadding="0" align="center" id="headertable" bgcolor="#00000">-->
    <tbody>
        <tr>
            <td>
                <img class="absolutepos" width="600" height="290" style="z-index: -1; top: 0;" alt="header_image" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" >
                <!--<img class="absolutepos" style="max-width: 600px; z-index: -1; top: 0;" alt="header_image" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" >-->
            </td>
        </tr>
        <tr>
            <td class="absolutepos" style="top: 15px; padding: 0 0 0 20px;">
                <a href="http://google.com" target="_blank" title="google">
                    <img width="175" height="47" alt="logo" src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png">
                </a>
            </td>
        </tr>
        <tr>
            <td class="absolutepos" style="top: 80px;">
                <span id="invitation">type</span>
            </td>
        </tr>
        <tr>
            <td align="center" class="absolutepos" style="top: 150px;">
                <h1>Big title</h1>
                <h2>subtitle</h2>
            </td>
        </tr>
        <tr>
            <td align="center" class="absolutepos" style="top: 225px;">
                <a href="http://google.com" target="_blank" title="Register" class="submit-button">
                    Register
                </a>
            </td>
        </tr>
    </tbody>
</table>

<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" width="600">
    <tbody>
        <tr>
            <td colspan="2" style="padding: 40px 30px 10px 30px;">
                ...

提前致谢

最佳答案

position:absolute 在 gmail 中不起作用。Outlook 使用 HTML 呈现器，因此您也可能在 Outlook 中遇到一些问题。

Source: Detailed list for CSS support in different email clients

关于HTML 电子邮件 header 未按应有的方式定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35357963/

25

4

0

文章推荐： C++ 指向数组的指针并访问？

文章推荐： ios - 在 Esri map 中单击位置按钮时移动到当前位置

文章推荐： javascript - 过滤特定的多个表达式 Angular js

文章推荐： c++ - 定义和播种具有全局范围的伪随机数生成器 (C++)

jQuery追加()定位
我必须从我的网站中删除()一些iem，然后将它们追加()回来，但是当我追加它们时，它们出现在不同的地方，而我希望它们完全显示在它们以前的同一个地方是。有什么解决办法吗？这是一个沙箱，请随意更新(注
CSS - 定位
一个。图片 (960x7)b. div(宽度:960，填充:10) 我想定位 (a)，使其距顶部 50 像素，居中。我想将 (b) 放置在 (a) 的正下方，没有空格。我的 CSS 如下: @cha
CSS 定位
放置某物的正确方法是什么？我有一个在中心显示博客文章的 div。 "" rel="bookmark"> BY LOUIS MOORE ON " pubdate>
CSS 定位
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭1
CSS 定位
我已经成功地使用了 position:fixed 设置 CSS/CSS3 并且工作得很好! 我几天前看到了这个，想知道他们是如何实现向下滚动时发生的效果的，菜单栏在滚动前处于一个位置，然后转到顶部并自
CSS:定位
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 7 年前。 Improv
slate源码解析（三）-定位
接口定义能够对于文字、段落乃至任何元素的精准定位并做出增删改查，都是在开发一款富文本编辑器时一项最基本也是最重要的功能之一。让我们先来看看Slate中对于如何在文档树中定位元素是怎么定义的
WPF tabitem 定位
例如，使用 WPF 在选项卡控件的最左上角定位三个 tabitem 和在最右上角定位一个 tabitem 的正确方法是什么？我尝试通过更改边距将第四个 tabitem 向右移动，但这并没有产生好的结
javascript - 眼睛跟随光标 - 定位？
我正在尝试使用 Javascript 创建一个跟随鼠标在页面上移动的东西。我希望它是米老鼠，我希望他的眼睛跟随鼠标移动他的眼球...这是我到目前为止的代码(从网络上的各个地方收集，因此归功于编写该部分
arduino - 射频三角测量(定位)
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 9 年前。 Improve
Java GUI - 定位
我试图将两个按钮放置在左上角。但它们始终位于顶部中心。我已经尝试过这个: jp = new JPanel(); jp.setLayout(new GridBagLayout()); GridBagC
jQuery Slide Down 定位
我在使用 JQuery 向下滑动功能时遇到问题。我可以让它正常工作，但是我向下滑动的元素的位置会根据视口(viewport)的大小而变化。我想做的是将它与它滑动的元素联系起来。 This JSfidd
javascript游戏 Sprite 定位
我正在尝试创建一个棋盘，并将其放置在屏幕中间，但到目前为止我无法将它直接放在中间。我不想将位置硬编码到屏幕上，因为我要处理不同的屏幕尺寸。 var winsize = cc.director.
mysql - 定位、子串查询
我正在尝试从 mysql 中的 2 个字符串点之间提取数据，我的示例脚本是 'otherdata&p1=textneeded&otherdata' 我需要拉出“textneeded”位，“P1=”是起
按钮的 JavaFX 定位
如何在 JavaFX 中设置按钮的位置？我的代码: bZero = new Button(); bZero.setPrefSize(45, 20); mainPane.getChildren().ad
iphone - 定位 UIScrollView
我有一个 iPhone 应用程序，我可以在其中显示一系列图像。当用户点击图像时，我需要将该图像带到第一个位置，表明它是所选图像。我可以通过子类化实现 uiscrollview 中的点击。但是我无法将
使用导航栏的 CSS 定位
在下图中，它显示了一个image、textbox 和一个css menu image 我的 CSS 菜单非常完美。我终于按照我需要的方式得到了它。我的问题是我需要导航栏中央的文本框，然后我需要我的图像
html - CSS 定位
我必须创建一个看起来像这样的 div id为2的div应该出现在图片的右下角，图片的大小不固定id=2的div应该应用什么css id =1 的 div 没有定义位置，所以使用默认值，图像也是
文本和图像在同一行的 CSS 定位
如何将我的文本和图像对齐在同一行？每当我使用 padding 或 margins 时，它就会崩溃到我正在使用的圆形图像中。 #alignPhoto { padding-right: 50px;
使用页面引用的 CSS 定位
简单的问题，如何定位具有整个页面引用的元素？在我的例子中，我在标题中得到了一个 float 图像，然后是 2 组标题。当我使用时: text-align: center; 它使用图像宽度端和页面其余

首页

博学

6Ren·AI

商城

HTML 电子邮件 header 未按应有的方式定位