1

我们为我们的电子邮件消息找到了一段代码，它可以调整移动设备的电子邮件大小，但保持文本的大小。

我们对电子邮件消息使用拆分图像，并在图像上方显示文本。问题是我们在 tr 命令的图像中得到一条白线。如果从标题中删除以下代码，则图像显示没有白线。当我重新添加代码时，在 iPhone 或 Droid 上查看电子邮件时，我无法摆脱白线。它在所有电子邮件客户端的桌面/笔记本电脑上完美显示。

这是我们放在 head 部分的代码。

<style type="text/css"> @media only screen and (max-width: 600px)
  {/*CSS styles here will be applied on supporting mobile devices*/
  table, div {width:100% !important; max-width: 600px !important; position:relative !important; height:auto !important; overflow:hidden !important; top:0px !important;}
  img {max-width:100%; height: auto !important;}}
</style>

关于如何摆脱白线的任何建议？

4

2 回答 2

0

试试display:block;你的图片标签。

于 2013-02-06T21:26:29.827 回答
0

position:relative 对我来说似乎很奇怪。我也不认为你需要指定 height:auto !important;

如果您试图让您的图像响应，即始终 100% 宽度的容器元素，您可以指定 width="100% 并省略高度规范。它将以适当的比例缩放。

如果您只需要一些代码来阻止图像上方的文本在移动设备（例如 iPhone 等）上调整大小，这些就是我一直在使用的。

div, p, a, li, td { -webkit-text-size-adjust:none; }
     #outlook a {padding:0;} /* Force Outlook to provide a "view in
browser" menu link. */
     html{width: 100%; }
     body{width:100% !important; -webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%; margin:0; padding:0;}
     /* Prevent Webkit and Windows Mobile platforms from changing
default font sizes, while not breaking desktop design. */
     .ExternalClass {width:100%;} /* Force Hotmail to display emails at
full width */
     .ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /*   

Hotmail to display normal line spacing. */
     .backgroundTable {margin:0; padding:0; width:100% !important;
line-height: 100% !important;}
     img {outline:none; text-decoration:none;border:none;
-ms-interpolation-mode: bicubic;}
于 2014-04-16T02:54:15.330 回答