[英]gmail.com email client ignores the display: inline-block; CSS style on a table element (block element)
I am sorry to ask another question about html email, but html emails are more complicated than i thought.我很抱歉问另一个关于 html 电子邮件的问题,但是 html 电子邮件比我想象的要复杂。
I want to have 2 columns next to each other when a user views the email on desktop (big screen) clients, and I want this 2 same columns to stack on top of each other when viewed on mobile clients.当用户在桌面(大屏幕)客户端上查看电子邮件时,我希望有 2 列彼此相邻,并且我希望这 2 列在移动客户端上查看时彼此堆叠。
I know my apporach is wrong, and therefore it doesn't work.我知道我的方法是错误的,因此它不起作用。
I have created 2 tables, which are block elements by default.我创建了 2 个表,默认情况下它们是块元素。 I am trying to make these 2 tables inline with MEDIA QUERY.
我正在尝试将这 2 个表与 MEDIA QUERY 内联。
By default, these 2 tables are block elements, but I want to make them inline on big screens ONLY, and leave them as default on mobile screens.默认情况下,这 2 个表是块元素,但我只想在大屏幕上将它们内联,并在移动屏幕上将它们保留为默认值。
GMAIL PROBLEM : I have created the following code, but for some reasons when I view the email on my Gmail.com account, the 2 column (tables) DO NOT inline. GMAIL问题:我创建了以下代码,但由于某些原因,当我在 Gmail.com 帐户上查看电子邮件时,第 2 列(表格)不会内联。 They continue to be block elements.
它们仍然是块元素。
When i view this email on yahoo or on a browser, the 2 tables are next to each other (inlined), No problem there.当我在雅虎或浏览器上查看这封电子邮件时,2 个表彼此相邻(内联),没问题。
<table width="100%" bgcolor="#f6f8f1" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" style="max-width:600px; border:1px #666666 solid;">
<tr>
<td>
<!-- 1st Row -->
<table width="100%" align="center" bgcolor="002B70" border="0" cellpadding="5" cellspacing="0">
<tr>
<td>
<!-- 1st table column. Block element by default. want this to be inline element on all DESKTOP clients, but leave it as default on mobile clients -->
<table class="desktop-column">
<tr>
<td style="text-align:center;">
<a href="#" style="text-decoration:none; color:#ffffff">
<img src="#" alt="#" />
</a>
</td>
</tr>
</table>
<!-- 2nd table. Block element by default, want this to be inline element on all DESKTOP clients, but leave it as default on mobile clients -->
<table class="desktop-column">
<tr>
<td style="text-align:center;" id="menu">
<a href="#" style="text-decoration:none;color:#ffffff">MENU1</a>
<a href="#" style="text-decoration:none;color:#ffffff">MENU2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
The CSS is as below: CSS如下:
@media screen and (min-device-width: 601px), screen and (min-width:601px) {
/* GMAIL.com IGNORING THIS. I want this element to be inline on DESKTOP clients */
*[class="desktop-column"] {display: inline-block!important; background-color:red;}
}
@media screen and (max-width: 525px) {
*[id="menu"] {font-size:12px;}
}
Thank you for your help,感谢您的帮助,
Gmail 不支持媒体查询,可以在此处找到有关媒体查询支持的更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.