我有一个测试布局,它使用表格显示两列和媒体查询,它们将两列堆叠在支持媒体查询的电子邮件客户端上.我坚持使用表而不是div,因为我们还需要支持Outlook :(.布局在Android 4.3及以下版本中工作得很好(列叠加)但在Nexus 5(Android 4.4.2)上爆炸.两列第二列完全被挤压后仍然显示在彼此旁边.似乎4.4.2不支持td的显示块.有没有其他人经历过这个？如果是的话,有没有解决这个问题？顺便说一下,看起来只有显示块和显示:Nexus 5不支持内联块,如果我在我的媒体查询中将tds设置为display:none,它们将隐藏在屏幕上.下面是一个基本的html电子邮件模板,它不会工作:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0;width:device-width">
<!-- So that mobile webkit will display zoomed in -->
<title>Email template</title>
<!-- disable auto telephone linking in iOS -->
<meta name="format-detection" content="telephone=no">
<style type="text/css">
@media screen and (max-width:640px) {
table[class="container"] {
width: 100%!important;
}
td[class="cell"] {
background-color: #cc3333;
width: 100%!important;
display: block!important;
}
}
</style>
</head>
<body>
<table width="640" align="center" cellpadding="0" cellspacing="0" class="container">
<tr>
<td …