Question

我被要求编写一封html邮件（用于邮寄活动）。除了以下代码之外，我已经完成了所有工作。我尝试做的是拥有一个顶部有其他元素的图像，如标题，按钮，徽标...... 我拥有所有这些（没有注释行），但为了使其响应，我不得不进行一些更改（注释行），然后布局完全搞砸了。为了让它更具挑战性，观察前景（即使是没有注释的线条）也是非常可怕的，所以这样的解决方案也很好（前景似乎剥夺了所有定位属性）

<!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;">
                ...

提前致谢

Answer 1

position:absolute无法在Gmail中使用。 Outlook正在使用HTML渲染器，因此您可能也会在Outlook中遇到一些问题。

Source: Detailed list for CSS support in different email clients

Html电子邮件标题不应该定位

1 个答案: