Question

我们在电子邮件中找到了一段代码，可以调整移动设备的电子邮件大小，但会保留文本的大小。

我们使用拆分图片作为电子邮件，图片上方有文字。问题是我们在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>

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

Answer 1

在您的图片代码中尝试display:block;。

Answer 2

职位：亲戚对我来说很奇怪。我也认为你不需要指定身高：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;}

iPhone上带有分割图像的电子邮件中的白线

2 个答案: