时事通讯中忽略了z-index

Question

时事通讯中忽略了z-index

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Thank you for subscribing to our newsletter!</title>

        <style>
            img.img {
                z-index: -1;
                position: absolute;
                float:left;
            }

            .content {
                position: relative;
                z-index: 5;
            }
        </style>

    </head>
    <body>

        <div style="width: 750px; font-family: Arial, Helvetica, sans-serif; font-size: 11px;">
            <img class="img" src="email.png" />

            <div class="content">
                <h1>Text<small>app</small></h1>

            </div>
        </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

例如,当我将此简报发送到gmail时,将忽略z-index.我想要的是img上的文字.但它将首先渲染图像然后再渲染文本.

基本上,z-index被忽略.这可以解决,或者我不能使用z-index？

Answer 1

Joh*_*ohn 10

更新:此列表已移至此处:编写HTML电子邮件时的最佳实践和注意事项

你不应该使用z-index,divs,position或float.基本上你的整个html电子邮件方法是错误的.Html电子邮件是一个不同的野兽html for web.以下是一些资源:

其中一些信息的一小部分在技术上并非100%正确(html电子邮件确实是一种黑色艺术),但它们会让你99%的方式.

其他支持指南:

您还需要使用VML来获取在Outlook中工作的背景图像.以下是一些VML链接:

你应该总是在html-email中内联你的CSS.以下是CSS Inlining工具列表的链接:

内联工具(堆栈溢出)

归档时间：	12 年，1 月前
查看次数：	8555 次
最近记录：	11 年，10 月前