td与图片之间的HTML白线(Chrome,Opera,Gmail)

时间:2017-08-07 20:59:54

标签: html email line

使用以下代码在Chrome,Opera和Gmail中撰写电子邮件时,我遇到白线边距问题。

如果打开开发者控制台,您可以看到图像周围的td与图像大小相同,所以我不确定为什么会有额外的空白区域。

White lines



<!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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</title>
	<style type="text/css">
		.images {
			width: 100% !important;
		}
		.desktop {
			display: inline;
			mso-table-lspace: 0px;
			mso-table-rspace: 0px;
		}
		@media only screen and (min-width: 400px) and (max-width: 660px) {
			td div {
				width: 282px;
				margin: auto;
				float: center;
				text-align: center;
			}
		}
		@media only screen and (max-width: 399px) {
			td div {
				width: 100%;
				max-width: 282px;
				margin: auto;
				float: center;
				text-align: center;
			}
		}
	</style>
</head>
  <body>
  <table border="0" cellspacing="0" cellpadding="0" width="100%" align="center">
  	<tr>
  		<td align="center" width="100%">
        <table border="0" cellspacing="0" cellpadding="0" align="center">
  				<tr>
  					<td align="center" width="600" style="padding-left: 5px; padding-right: 5px;">
  						<table border="0" cellspacing="0" cellpadding="0" align="center">

                <!-- Start -->
  							<tr>
  								<td colspan="3" align="center" width="600" style="padding-top: 15px; padding-bottom: 15px; font-size: 10px; font-family: Arial, sans-serif; color: #898e92; line-height: normal;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
  							</tr>

                <tr>
  								<td colspan="3" width="600" align="center">
  									<a href="#" target="_blank" style="text-decoration: none;"><img border="0" src="http://i.imgur.com/pM0Vjtt.jpg" style="display: block; width: 100%;" class="images" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></a>
                  </td>
  							</tr>
                <tr>

                 <td width="30" align="center">
                      <img border="0" src="http://i.imgur.com/2jAlVvY.jpg" style="display: block; width: 100%;" class="images" alt="">
                    </td>
                  <td width="215" align="center">
                    <a href="#" target="_blank" style="text-decoration: none;"><img border="0" src="http://i.imgur.com/2FpjTZk.jpg" style="display: block; width: 100%;" class="images" alt="Lore"></a>
                  </td>

                  <td width="355" align="center">
                    <img border="0" src="http://i.imgur.com/Gob71Qy.jpg" style="display: block; width: 100%;" class="images" alt="">
                  </td>
                </tr>
                <tr>
                  <td colspan="3" width="600" align="center">
                  <img border="0" src="http://i.imgur.com/FKOuWjg.jpg" style="display: block; width: 100%;" class="images" alt="">
                  </td>
                </tr>
                <tr>
  								<td colspan="3" align="center" width="600" style="padding-top: 15px; padding-bottom: 15px; font-size: 10px; font-family: Arial, sans-serif; color: #898e92; line-height: normal;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  								</td>
  							</tr>

              </table>
              </td>
            </tr>
            </table>
          </td>
        </tr>
      </table>
</body>
</html>
&#13;
&#13;
&#13;

非常感谢您提供有关任何错误的信息。不知道它的错误或奇怪的东西。

0 个答案:

没有答案