我正在开发一个 HTML 电子邮件，它使用两列用于桌面设计，一列用于移动设计。而不是处理所有复杂的目标桌面版本的特定元素与媒体查询并试图使它们适用于移动设备(这样做是电子邮件的噩梦......)，我想我会为移动设备制作一个完全独立的表格并使桌面版消失(显示:无)，在450px以下断点。
现在，这有效；但是，在桌面上(450px 以上)，我将移动表格设置为 (display none; display: none !important;) 出现了问题。当在大于 450 像素的屏幕上打开电子邮件时(在 GMAIL 中，而不是在浏览器中。我正在使用名为“freshmail”的服务来测试它)，最初只出现桌面表格；但是，没有任何图像存在。 Gmail 询问“在下方显示图像”并单击此按钮会重写我的样式表，以便即使我明确告诉它也不会显示移动表格。
我知道这是一件棘手的事情，我已经尝试了很多解决方法来克服它，但都没有奏效。如果有人可以帮助我完成这项工作，我将不胜感激。
我的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style>
@media (min-width: 451px) {
#mobile {
display: none;
display: none !important;
}
}
@media (max-width: 450px) {
#desktop {
display: none !important;
}
#mobile {
display: block !important;
}
}
</style>
</head>
<body style="width: 100% !important; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.4; font-family: Helvetica; overflow-x: hidden;">
<table id="desktop" cellpadding="0" cellspacing="0" width="100%" border="1px solid black">
<tr>
<td style="display: block; clear: both !important; margin: 0 auto !important; width: 600px !important; overflow: hidden;">
<table border="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
<tr style="">
<th>
</th>
<th style="padding-top: 20px;">
<span style="color: #504e4b;"/>
example text
</span>
</th>
</tr>
<tr style="padding: 0; background: #ffffff; color: #504e4b;">
<td colspan="2">
<a href='#' style="cursor: default;"><img src="assets/example.gif" style="display: block;"></a>
<a href='#' style="cursor: default;"><img src="assets/example.gif" style="display: block; pointer-events: none; cursor: default;"></a>
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; padding-left: 30px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 30px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-left: 30px; padding-bottom: 20px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="width: 50%; padding: 0px; border: none;">
<a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a>
</td>
<td style="padding: 0px; border: none;">
</td>
</tr>
<tr style="height: 415px; color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a>
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
<td style="padding: 0px;">
<a href='#' style="cursor: default;"><img src="assets/example.gif" style="display: block;"></a>
</td>
</tr>
<tr style="vertical-align: top; color: #504e4b;">
<td style="width: 50%; padding: 0px; border: none;">
<a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a>
</td>
<td style="text-align: right; padding: 0px;">
<a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block; padding-right: 20px;"></a>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 180px; margin-bottom: 10px; padding-right: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; font-weight: 200; color: #504e4b;">
example text
</span>
<a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a>
</td>
</tr>
<tr style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 30px; padding-top: 50px;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200;">
example text
</span>
</td>
<td style="padding: 0px;">
<a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
</td>
<td style="width: 50%; padding: 0px; border: none;">
<a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a>
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" colspan="2" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- mobile view -->
<table id="mobile" border="1px solid #f2f2f2" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; margin: 0 auto;">
<tr>
<td align="center" style=" clear: both !important; margin: 0 auto !important; width: 100% !important; max-width: 450px !important; overflow: hidden; overflow-y: hidden;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style=" border-collapse: collapse;">
<tr id="date">
<th style="padding-top: 20px;">example text</th>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="header" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="planter" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td style="padding: 20px;">
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-bottom: 0px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
<a href='#' style="cursor: default;"><img id="trend-top" src="assets/example.png" style="display: block;"></a>
</td>
</tr>
<tr style="color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<a href='#' style="cursor: default;"><img id="trend-bottom" src="assets/example.png" style="display: block;"></a>
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="trend-wheels" src="assets/example.gif" style="display: block; width: 100%;">
</td>
</tr>
<tr>
<td align="center" style="background: #ffffff;">
<img id="display-ideas" src="assets/example.png" style="max-width: 170px; display: block; width: 100%;">
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 30px; margin-bottom: 10px; padding-left: 20px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 0px; font-weight: 200; color: #504e4b; text-align: left;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="pot-stand" src="assets/example.png" style="display: block; margin: 0 auto; padding: 20px 0px 40px 0px; max-width: 300px; width: 90%">
<a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a>
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td style="padding: 0px;">
<a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a>
<a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a>
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 35px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; text-align: left;">
example text
</span>
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
最佳答案
尝试将 mso 规则添加到您的隐藏和取消隐藏中。您也可以使用基本断点，但我发现还使用 @media 屏幕和 (max-width:XXpx) 是更好的解决方案，因为大多数人不会随身携带笔记本电脑小于 450 像素宽。
电子邮件设计和开发是一个完全混合的包，祝你好运。
总而言之，我不会采用这种方法来隐藏和取消隐藏内容。 Outlook 会完全忽略它，而 Gmail 会做(如您所知)不可预测的事情。
这是我制作的基本模板的链接 Email template这可能会有所帮助。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style>
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-webkit-font-smoothing: antialiased;
}
v*{
behavior:url(#default#VML);
display:inline-block;
}
.ExternalClass{
width:100%;
}
td{
border-collapse: collapse!important;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div{
line-height:100%;
}
a img{
border:none;
}
a {
text-decoration:none !important;
}
img{
display:block;
outline:none;
text-decoration:none;
border:none;
-ms-interpolation-mode: bicubic;
}
table{
border-spacing:0;
border-collapse: collapse !important;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
@media (min-width: 451px) {
table#mobile {
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
}
@media (max-width: 450px) {
table#desktop {
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
table#mobile {
display: inline !important;
}
}
</style>
</head>
<body style="width: 100% !important; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.4; font-family: Helvetica; overflow-x: hidden;">
<table id="desktop" cellpadding="0" cellspacing="0" width="100%" border="1px solid black">
<tr>
<td style="display: block; clear: both !important; margin: 0 auto !important; width: 600px !important; overflow: hidden;">
<table border="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
<tr style="">
<th>
</th>
<th style="padding-top: 20px;">
<span style="color: #504e4b;"/>
example text
</span>
</th>
</tr>
<tr style="padding: 0; background: #ffffff; color: #504e4b;">
<td colspan="2">
<a href='#' style="cursor: default;"><img src="assets/example.gif" style="display: block;"></a>
<a href='#' style="cursor: default;"><img src="assets/example.gif" style="display: block; pointer-events: none; cursor: default;"></a>
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; padding-left: 30px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 30px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-left: 30px; padding-bottom: 20px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="width: 50%; padding: 0px; border: none;">
<a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a>
</td>
<td style="padding: 0px; border: none;">
</td>
</tr>
<tr style="height: 415px; color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a>
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
<td style="padding: 0px;">
<a href='#' style="cursor: default;"><img src="assets/example.gif" style="display: block;"></a>
</td>
</tr>
<tr style="vertical-align: top; color: #504e4b;">
<td style="width: 50%; padding: 0px; border: none;">
<a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a>
</td>
<td style="text-align: right; padding: 0px;">
<a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block; padding-right: 20px;"></a>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 180px; margin-bottom: 10px; padding-right: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; font-weight: 200; color: #504e4b;">
example text
</span>
<a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a>
</td>
</tr>
<tr style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 30px; padding-top: 50px;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200;">
example text
</span>
</td>
<td style="padding: 0px;">
<a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
</td>
<td style="width: 50%; padding: 0px; border: none;">
<a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a>
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" colspan="2" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- mobile view -->
<table id="mobile" border="1px solid #f2f2f2" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; margin: 0 auto;">
<tr>
<td align="center" style=" clear: both !important; margin: 0 auto !important; width: 100% !important; max-width: 450px !important; overflow: hidden; overflow-y: hidden;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style=" border-collapse: collapse;">
<tr id="date">
<th style="padding-top: 20px;">example text</th>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="header" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="planter" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td style="padding: 20px;">
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-bottom: 0px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
<a href='#' style="cursor: default;"><img id="trend-top" src="assets/example.png" style="display: block;"></a>
</td>
</tr>
<tr style="color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<a href='#' style="cursor: default;"><img id="trend-bottom" src="assets/example.png" style="display: block;"></a>
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="trend-wheels" src="assets/example.gif" style="display: block; width: 100%;">
</td>
</tr>
<tr>
<td align="center" style="background: #ffffff;">
<img id="display-ideas" src="assets/example.png" style="max-width: 170px; display: block; width: 100%;">
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 30px; margin-bottom: 10px; padding-left: 20px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 0px; font-weight: 200; color: #504e4b; text-align: left;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="pot-stand" src="assets/example.png" style="display: block; margin: 0 auto; padding: 20px 0px 40px 0px; max-width: 300px; width: 90%">
<a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a>
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td style="padding: 0px;">
<a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a>
<a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a>
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 35px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; text-align: left;">
example text
</span>
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>关于html - 从 Gmail 的 "Display Images Below"隐藏表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46075775/