gmail.com 電子郵件客戶端忽略顯示：inline-block； 表格元素（塊元素）上的 CSS 樣式

Question

我很抱歉問另一個關於 html 電子郵件的問題，但是 html 電子郵件比我想象的要復雜。

當用戶在桌面（大屏幕）客戶端上查看電子郵件時，我希望有 2 列彼此相鄰，並且我希望這 2 列在移動客戶端上查看時彼此堆疊。

我知道我的方法是錯誤的，因此它不起作用。

我創建了 2 個表，默認情況下它們是塊元素。 我正在嘗試將這 2 個表與 MEDIA QUERY 內聯。

默認情況下，這 2 個表是塊元素，但我只想在大屏幕上將它們內聯，並在移動屏幕上將它們保留為默認值。

GMAIL問題：我創建了以下代碼，但由於某些原因，當我在 Gmail.com 帳戶上查看電子郵件時，第 2 列（表格）不會內聯。 它們仍然是塊元素。

當我在雅虎或瀏覽器上查看這封電子郵件時，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>

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;}
}

感謝您的幫助，

Answer 1

Gmail 不支持媒體查詢，可以在此處找到有關媒體查詢支持的更多信息