Question

我需要发送一封html电子邮件，但图片显示移动设备存在差距。我使用了Campaign Monitor的内联工具，但图像仍显示移动设备上的差距。我的笔记本电脑绝对没问题。

我正在使用Gmail客户端检查笔记本电脑和手机上的电子邮件。

有人可以帮忙吗？

代码：

<!DOCTYPE HTML>
<head>
<title>DR. EARTH &ndash; Results on Wheat</title>
<meta name="keywords" content="Dr. Earth results on wheat, plant growth promoter, extracted from sapropel, it really works, better root growth, increase in yield by 7.5 quintals per acre, arrest of 'kamal bant' disease, increases crop yield by 30%, improves quality of produce, improves resistance to diseases, VRS Agritech, Designed by BK Suru">
<meta name="author" content="Bhavesh Kumar Suru - www.BKsuru.com">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 2010 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="viewport" content="width=device-width, user-scalable=yes, height=device-height"/>
<link rel="icon" href="favicon.png" type="image/x-icon">
<style type="text/css">
html,body{min-height:100%}
body {
    background-color: #999999 !important;
}
img.map, map area{
    outline: none;
}
img {
display: block !important;
}
.border {
    border:solid #999 thin;
}
.shadow {
   -webkit-box-shadow: 1px 1px 10px 2px #777;
       -moz-box-shadow: 1px 1px 10px 2px #777;
            box-shadow: 0px 2px 5px 2px #777;
}
.rounded {
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    border-radius: 15px 15px 15px 15px !important;
}
.rounded-top {
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    border-radius: 15px 15px 0px 0px !important;
}
.rounded-bottom {
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    border-radius: 0px 0px 15px 15px !important;
}
p {
    font-family:Verdana, Geneva, sans-serif;
    letter-spacing:0.025em;
    text-align: center;
    font-size:12px !important;
    color:#222; 
    margin-top:15px;
    margin-bottom:15px;
    line-height:18px !important;
}
a:link {
    text-decoration: none;
    color: #000;
}
a:visited {
    text-decoration: none;
    color: #000;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: none;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="min-height:100%;background-color:#999999 !important;" >

<p style="font-family:Verdana, Geneva, sans-serif;letter-spacing:0.025em;text-align:center;font-size:12px !important;color:#222;margin-top:15px;margin-bottom:15px;line-height:18px !important;" ><a href="http://www.drearth.in/campaigns/results-on-wheat" target="_new" style="text-decoration:none;color:#000;" >Open this email in browser</a></p>

<table width="800" height="1713" align="center" cellpadding="0" cellspacing="0" id="Table_01" border="0" class="border shadow rounded" style="border-width:thin;border-style:solid;border-color:#999;-webkit-box-shadow:1px 1px 10px 2px #777;-moz-box-shadow:1px 1px 10px 2px #777;box-shadow:0px 2px 5px 2px #777;-moz-border-radius-topleft:15px;-moz-border-radius-topright:15px;-moz-border-radius-bottomright:15px;-moz-border-radius-bottomleft:15px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:15px;border-radius:15px 15px 15px 15px !important;" >
<tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_01.jpg" alt="" width="800" height="57" border="0" usemap="#Map5" class="rounded-top" style="display:block !important;-moz-border-radius-topleft:15px;-moz-border-radius-topright:15px;-moz-border-radius-bottomright:0px;-moz-border-radius-bottomleft:0px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:0px;-webkit-border-bottom-left-radius:0px;border-radius:15px 15px 0px 0px !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_02.jpg" alt="" width="800" height="57" border="0" usemap="#Map4" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_03.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_04.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_05.jpg" width="800" height="58" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_06.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_07.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_08.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_09.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_10.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_11.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_12.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_13.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_14.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_15.jpg" width="800" height="58" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_16.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_17.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_18.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_19.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_20.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_21.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_22.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_23.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_24.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_25.jpg" width="800" height="58" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_26.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_27.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_28.jpg" alt="" width="800" height="57" border="0" usemap="#Map3" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_29.jpg" alt="" width="800" height="57" border="0" usemap="#Map" style="display:block !important;" ></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_30.jpg" alt="" width="800" height="57" border="0" usemap="#Map2" class="rounded-bottom" style="display:block !important;-moz-border-radius-topleft:0px;-moz-border-radius-topright:0px;-moz-border-radius-bottomright:15px;-moz-border-radius-bottomleft:15px;-webkit-border-top-left-radius:0px;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:15px;border-radius:0px 0px 15px 15px !important;" ></td>
    </tr>
</table>

<p style="font-family:Verdana, Geneva, sans-serif;letter-spacing:0.025em;text-align:center;font-size:12px !important;color:#222;margin-top:15px;margin-bottom:15px;line-height:18px !important;" >If you do NOT wish to receive any future communication from <b>Dr. Earth</b> <br>then you can unsubscribe by email to <a href="mailto:unsubscribe@drearth.in?subject=Please unsubscribe me from your mailing list" style="text-decoration:none;color:#000;" >unsubscribe@drearth.in</a></p>

<p style="font-family:Verdana, Geneva, sans-serif;letter-spacing:0.025em;text-align:center;font-size:12px !important;color:#222;margin-top:15px;margin-bottom:15px;line-height:18px !important;" >© 2015 <b>VRS Agritech Pvt. Ltd.</b> All Rights Reserved</p>

<map name="Map">
  <area shape="rect" coords="135,39,319,60" href="http://www.vrsagritech.com" target="_tab" style="outline-style:none;" >
  <area shape="rect" coords="565,14,769,33" href="http://www.drearth.in" target="_tab" style="outline-style:none;" >
  <area shape="rect" coords="502,40,767,62" href="mailto:customercare@drearth.in" target="_new" style="outline-style:none;" >
  <area shape="rect" coords="30,0,127,48" href="http://www.vrsagritech.com" target="_tab" style="outline-style:none;" >
</map>

<map name="Map2">
  <area shape="rect" coords="3,21,301,53" href="http://www.vrsagritech.com" target="_tab" style="outline-style:none;" >
  <area shape="rect" coords="663,21,795,53" href="http://www.bksuru.com" target="_tab" style="outline-style:none;" >
</map>

<map name="Map3">
  <area shape="rect" coords="30,51,125,67" href="http://www.vrsagritech.com" target="_tab" style="outline-style:none;" >
</map>

<map name="Map4">
  <area shape="rect" coords="209,-1,594,44" href="http://www.drearth.in" target="_tab" style="outline-style:none;" >
</map>

<map name="Map5">
  <area shape="rect" coords="209,30,594,66" href="http://www.drearth.in" target="_tab" style="outline-style:none;" >
</map>
</body>
</html>

移动屏幕截图：

笔记本电脑截图：

Answer 1

使用DIV而不是style =“display：block;”对于每个图像，它就像一个魅力。

尽管内联样式，HTML电子邮件图像在移动设备上破碎

1 个答案: