z-index在通讯中被忽略 [英] z-index ignored in newsletter
问题描述
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // ENhttp://www.w3.org/TR/html4/loose。 dtd>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
< title>感谢您订阅我们的简报！< / 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 =imgsrc =email.png/>
< div class =content>
< h1>文字< small> app< / small>< / h1>
< / div>
< / div>
< / body>
< / html>
当我将此通讯发送到gmail时，z-index将被忽略。我想要的是img的文本。但它将先渲染图像，然后再渲染文本。
基本上z-index被忽略。这可以解决，或者我不能使用z-index？
列表已移至此处：最佳做法&编写HTML电子邮件时的注意事项
您不应使用z-index，div，position或float。基本上你的整个方法html电子邮件是错误的。 Html电子邮件是一个不同的野兽到html的web。以下是一些资源：
小部分的信息在其中一些在技术上不是100％正确（html电子邮件真的是一个黑色的艺术），但他们会得到你的99％的方式在那里。
其他支持指南：
您需要使用 VML ，以获得在Outlook中工作的背景图片。以下是一些VML链接：
您应该总是在html-email中嵌入您的CSS。以下是指向CSS内嵌工具列表的链接：
<!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>
When i send this newsletter to gmail for example, the z-index is ignored. what i want is the text over the img. But it will be rendered first the image and then the text.
Basically the z-index is ignored. this can be solved, or i can't use z-index?
Update: This list has been moved to here: Best Practices & Considerations when writing HTML Emails
You shouldn't use z-index, divs, position or float. Basically your whole approach to html email is wrong. Html email is a different beast to html for web. Here are some resources:
Small parts of the info in some of these aren't technically 100% correct (html email truly is a black art), but they'll get you 99% the way there.
Additional Support Guides:
You'll need to use VML to get background images working in Outlook also. Here are some VML links:
You should always inline your CSS in html-email. Here is a link to a list of CSS Inlining tools:
这篇关于z-index在通讯中被忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
