一种在内联css中隐藏HTML电子邮件中的表的方法 - 以后通过媒体查询显示它们

Question

我正在使用媒体查询开发我的第一个电子邮件移动模板.到目前为止,媒体查询很酷,从现在开始我肯定会在我的网页设计项目中使用它.

但是,我遇到了一个困难; 我有一个相当复杂的头部设计(上面有Facebook和YouTube的标识链接到相应的页面背景图片),所以它是一种特殊的方式切片.这使得制作移动版本变得不容易,我想也许我可以用不同的方式修复它:使用两个不同的标题表,一个在大型设备上显示,一个在小型设备上显示.

移动部分没问题,因为它们很好地解释了嵌入式CSS.

但我似乎无法隐藏其他邮件客户端的完整表.我试过display:none,position:绝对顶部和左边-9999px等等...

有人有解决方案吗？这会节省我很多时间.

Answer 1

好吧,我似乎自己找到了解决方案:

内联,在表中的元素隐藏在普通的非移动版本中,我把以下属性:

line-height:0px;
font-size:0px;
height:0px;
margin:0;
padding:0;

我正在测试它,在td内有一个tr,一个td和一个p的表.

我把这些属性放在几乎每个元素上:

<table cellpadding="0" cellspacing="0" border="0" align="center" id="hidden">
  <tr class="showmobile" style="line-height:0px;font-size:0px;height:0px;margin:0;padding:0;">
    <td class="showmobile" style="line-height:0px;font-size:0px;height:0px;margin:0;padding:0;">
       <p class="showmobile" style="color:White; line-height:0px;font-size:0px;height:0px;margin:0;padding:0;">Testing this shiznit</p>
    </td>
  </tr>
</table>

我还给这些元素提供了"showmobile"类,我在头部的内部样式表中操作如下:

tr[class="showmobile"]
        {
         line-height:125% !important;
         font-size:16px !important;
         height:30px !important;   
        }

td[class="showmobile"]
        {
         line-height:125% !important;
         font-size:16px !important;
         height:30px !important;   
        }

p[class="showmobile"]
        {
         line-height:125% !important;
         font-size:16px !important;
         height:30px !important;   
        }

这种选择类的方法,我从真棒的html电子邮件样板@ http://htmlemailboilerplate.com/ - >链接到这篇文章:http://www.campaignmonitor.com/blog/post/3457/media-query -issues-in-yahoo-mail-mobile-email / - >基本上,它使雅虎邮件发挥得很好,并且在不需要时不在媒体查询中应用CSS.

结论:我在四个平台上进行了测试:GMail,Outlook 2010,Lotus Notes(我知道!)和iPhone 3G.他们都给出了预期的结果,除了Outlook,它仍然显示1像素线.通过一些智能内容(将文本着色在背景中),这是非常容易隐藏的.

如果我遇到某些邮件客户端的任何问题,我会让你们最新.