0

{display:none!important;}を使用してモバイル バージョンを作成し、 {display:block!important;}を使用してそれを明らかにするメディア クエリを含む HTML メールがあります。

Outlook で転送すると、メールが壊れて両方の画像が表示され、モバイル画像の右側に大きな隙間ができます。

転送時に外観を維持するコーディング ソリューションを見つけた人はいますか?

HTML

    <table width="570" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
    <tr>
        <td class="vanish">
            <table width="570" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                <tr>
                    <td>
                        <a href="#" style="color: #999; text-decoration: none;">
                            <img src="Desktop.jpg" width="205" height="171" alt="" class="deviceWidth" style="display: block; background-color: #343434;" border="0"></a></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!-- End One Column -->
<!-- Houdini Start -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
    <tr>
        <td style="display: none; visibility: none; width: 0px; height: 0px;" class="houdini">
            <a href="#" style="color: #999; text-decoration: none;">
                <img style="display: none; visibility: hidden; width: 0px; height: 0px; border: 0px;" src="Mobile.jpg" alt="" class="houdini" /></a>
        </td>
    </tr>
</table>
<!-- Houdini End -->
4

0 に答える 0