我正在创建一个响应式电子邮件设计，其中几个图像会切换到较小的屏幕。我已经多次重新格式化了表格和tds，而较小的图像并没有显示出来。图像在线直播。请帮忙。
<!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>Happy St. Patrick's Day</title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
@media only screen and (max-width: 660px) {
table.one { width: 480px !important; }
table.two { width: 480px !important; }
table.three { width: 480px !important; }
table.four { width: 480px !important; }
table.five { width: 480px !important; }
td.shamtop img { display: none; }
td.shamtop { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/top-shamrock-med.gif) no-repeat; height: 79px; }
td.shammid img { display: none; }
td.shammid { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/mid-shamrock-med.gif) no-repeat; height: 151px; }
td.maintext p {font-size: 26px; }
}
@media only screen and (max-width: 510px) {
table.one { width: 300px !important; }
table.two { width: 300px !important; }
table.three { width: 300px !important; }
table.four { width: 300px !important; }
table.five { width: 300px !important; }
td.shamtop img { display: none; }
td.shamtop { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/top-shamrock-sm.gif) no-repeat; height: 79px; }
td.shammid img { display: none; }
td.shammid { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/mid-shamrock-sm.gif) no-repeat; height: 89px; }
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="600" border="0" cellspacing="0" cellpadding="0" class="one" align="center">
<tr>
<td bgcolor="#00a160" class="shamtop" style="background: #00A160; margin: 0px;"><img src="http://www.poscorp.com/emarketing/2015/images/top-shamrock-lrg.gif" width="600" height="79"></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="two">
<tr>
<td bgcolor="#ffffff" class="maintext" style="font-family: Arial, Helvetica, sans-serif; font-size: 32px; line-height:120%; color: #000; background: #FFF; padding: 15px 18px 10px 18px; font-weight:bold; text-align:center;"><p style="margin-top: 0px; margin-bottom: 16px;">In honor of St. Patrick’s Day we’d like to save you some <span style="color: #00a160;">GREEN</span>!</p></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="three">
<tr>
<td class="shammid" bgcolor="#b7da63" style="background: #b7da63;"><img src="http://www.poscorp.com/emarketing/2015/images/mid-shamrock-lrg.gif" width="600" height="195"></td>
</tr>
<tr>
<td align="center" bgcolor="#b7da63" style="background: #b7da63; font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height:120%; color: #000; padding: 15px 20px 10px 20px; font-weight:bold; text-align:center;"><p style="font-size:22px; margin-top:0px; margin-bottom: 7px;">Enter to Win $200 Towards a NEW Print Item.</p>
<p style="margin-top:0px; margin-bottom: 0px;">All entries must be made by the end of day today. <br>
Five winners will be drawn.</p></td>
</tr>
<tr>
<td align="center" bgcolor="#b7da63" style="background: #b7da63; padding: 0px 20px 15px 20px; text-align:center;"><a href="#"><img src="http://www.poscorp.com/emarketing/2015/images/enter-to-win-btn.gif" width="180" height="45"></a></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="four">
<tr>
<td align="center" valign="top" class="contact" style="font-family: Arial, sans-serif; font-size: 14px; line-height:115%; color: #333; background: #FFF; padding: 20px 20px 20px 20px;">
<table width="275" border="0" cellspacing="0" cellpadding="0" align="left" class="logo">
<tr>
<td class="poslogo"><a href="http://www.poscorp.com/home.html" target="_blank"><img src="http://www.poscorp.com/emarketing/2015/images/pos_logo_hc.gif" alt="POS Professional Office Services, Inc." width="272" height="45"></a></td>
</tr>
</table>
<table width="275" border="0" cellspacing="0" cellpadding="0" align="right" class="info">
<tr>
<td><p style="font-family: Arial, sans-serif; font-size: 14px; line-height: 100%; color: #333; font-weight:bold; margin:20px 0px 5px 0px; text-align:right;">800.331.4976 | <a href="http://www.poscorp.com/home.html" target="_blank" style="font-weight: bold; color: #333; text-decoration: none;">www.poscorp.com</a> | <a href="http://www.linkedin.com/company/professional-office-services" target="_blank"><img src="http://www.poscorp.com/emarketing/2015/images/linkedin.jpg" alt="LinkedIn" width="16" height="16" border="0" style="vertical-align:bottom;"/></a></p></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="five">
<tr>
<td align="center" valign="top" style="font-family: Arial, sans-serif; font-size: 12px; line-height:115%; color: #FFF; background: #00a160; padding: 5px 15px 5px 15px; margin:0px; font-style:italic;"><p>This offer is non-transferable and entries are limited to one entry per recipient.<br>
Contest winners will be notified by March 19th.</p></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html
答案 0 :(得分：0)
你的html有一个已定义的样式，它会覆盖你元素上的css。例如，改变：
<td class="shammid" bgcolor="#b7da63" style="background: #b7da63;">
<img src="http://www.poscorp.com/emarketing/2015/images/mid-shamrock-lrg.gif" width="600" height="195">
</td>
到
<td class="shammid" bgcolor="#b7da63">
<img src="http://www.poscorp.com/emarketing/2015/images/mid-shamrock-lrg.gif" width="600" height="195">
</td>
产生您正在寻找的结果。
您还应该考虑删除{* 1}}属性，因为它已在HTML5中弃用。