Question

我尝试创建响应式电子邮件模板。除了图像边框外，一切正常。我为图像和媒体样式设置了边框。但是在小屏幕中，图像边框将被破坏。

HTML

     <html>  
      <head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<style type="text/css">
@media only screen and (max-width: 480px) {
 .message_mobile {
  width: 100% !important;
  }
  }
 </style>
 </head>
 <body  id="message_body" style="background-color:white;" >
     <table style="border: 0px; border-collapse: collapse; border-spacing: 0px; width: 600px; display: table;" align="center" class="message_mobile"><tbody><tr>
          <td align="left" valign="top">
        <table cellpadding="0" cellspacing="0" style="border: 0px; border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: hidden;">
                <tbody><tr>
                    <td style="vertical-align:top;text-align:center;">
                      <div>
                        <img src="http://www.myfico.com/Images/sample_overlay.gif" alt=" " style="border: 16px solid rgb(196, 45, 196); display: block; width: 100%; padding: 2px; max-width: 94.64882943143813%;" width="auto">
                    </div>
                    </td>
                </tr>
            </tbody></table>
         </td>
         </tr>
  </tbody>
</table>
</body>
</html>

输出（大屏幕） enter image description here

输出（小屏幕）

enter image description here

Fiddle Demo

Answer 1

您可以将box-sizing设置为border-box，但由于这是一个相对较新的属性，并非所有浏览器（尤其是电子邮件客户端）都可以支持它。

通讯边框错误

1 个答案: