Question

这两个图像显示了我在相对DIV中正确定位的绝对DIV问题。

第二张图片是电子邮件附件，它看起来像各种风格的Outlook，Eudora和桌面版GMail甚至Safari中的电子邮件附件。它也适用于iPhone（Safari）电子邮件附件。

然而，第一张图片显示了如何在Android手机上使用GMail，当您将其作为电子邮件打开时，它显示为如图所示搞砸了。相对父DIV中的绝对定位DIV表现得好像它是'相对'。

我在这里看到的是，需要在相对定位的DIV中放置绝对定位的DIV。但这没有帮助。想法？

相关代码：

{{1}}

Answer 1

可悲的是，电子邮件开发并没有绝对的定位。 Z-Index不适用于大多数电子邮件客户端。填充和边距也存在问题。您不能使用负边距。小写m的边距在Outlook中不起作用，但它适用于大写M.

您可以使用背景图像来获取定位，但这需要Outlook的特殊解决方法，它不适用于后台，但适用于vml。这是一个例子：

<div style="background-color:#ff0000; width:600px;">
  <!--[if gte mso 9]><!-- -->
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
  <v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#ff0000"/>
  </v:background>
  <![endif]-->
  <table height="450" width="600" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
        <h1 style="text-align: center; color: #ffffff;-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-family: Arial, san-serif;">
          Background Image with text on top
        </h1>
      </td>
  </tr>
</table>
</div>

我明白答案告诉你不，不是没有帮助，但我不知道从哪里开始你当前的方法，但是想帮助澄清你为什么遇到困难。电子邮件开发并不是真正的Web开发。

祝你好运。

DIV在Android GMail中的绝对定位

1 个答案: