我正在处理一些具有响应式布局的电子邮件。它们在大多数情况下都有效，但某些版本的 IE 会产生各种错误。电子邮件显示为空白，但内容位于一个巨大窗口的中央(我假设这是电子邮件客户端允许的最大大小)。如果最大宽度不是一个选项，我该如何限制 IE 的电子邮件大小？ 谢谢!
这是我目前拥有的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Email</title>
<style type="text/css">
@media only screen and (min-device-width: 541px) {
.content {
width: 540px !important;
}
}
</style>
</head>
<body>
<!--[if (gte mso 9)|(IE)]>
<table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table bgcolor="#e4e4e4" width="100%" cellpadding="0" cellspacing="0" style="margin:0;">
<tbody>
<tr>
<td bgcolor="#acacac" width="100%" cellspacing="0" style="margin:0; padding-left:5%;">
<!--The guts of the email...-->
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>
最佳答案
至少有几种方法可以使您的电子邮件具有响应性或适应性。
第一种方法是为每个“列”创建单独的表格，并在您的容器太窄无法容纳两者时将它们换行。 (见例一)
第二种方法是像往常一样在表格中创建列，并在您希望它们折叠成行时将显示设置为阻塞。 (参见示例 2)
示例 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" name="viewport" content="text/html; charset=utf-8; initial-scale=1" />
<title>Method 1</title>
<style type="text/css">
@media only screen and (max-width:600px) {
table[class=container], table[class=responsiveTable] {width: 100% !important;}
}
</style>
</head>
<body>
<table class="container" border="0" cellspacing="0" cellpadding="0" width="600" align="center">
<tr>
<td>
<table class="responsiveTable" border="0" cellspacing="0" cellpadding="0" width="50%" align="left">
<tr>
<td bgcolor="#dddddd" align="center">FIRST COLUMN</td>
</tr>
</table>
<table class="responsiveTable" border="0" cellspacing="0" cellpadding="0" width="50%" align="left">
<tr>
<td bgcolor="#aaaaaa" align="center">SECOND COLUMN</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
示例 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" name="viewport" content="text/html; charset=utf-8; initial-scale=1" />
<title>Method 2</title>
<style type="text/css">
@media only screen and (max-width:600px) {
table[class=container], td[class=responsiveCell] {width: 100% !important;}
td[class=responsiveCell] {display: block !important;}
}
</style>
</head>
<body>
<table class="container" border="0" cellspacing="0" cellpadding="0" width="600" align="center">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="responsiveCell" bgcolor="#dddddd" width="50%" align="center">FIRST COLUMN</td>
<td class="responsiveCell" bgcolor="#aaaaaa" width="50%" align="center">SECOND COLUMN</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
关于html - 如何修复 IE 的流体布局电子邮件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22542913/