Question

我目前正在制作一个电子邮件模板，通过mailchimp发送，我注意到每当我在Gmail中测试电子邮件时，css就会被破坏。如果我在任何其他客户端检查电子邮件，它可以正常工作。

起初我以为可能是因为我在该部分中使用了一个标签，我认为Gmail不支持 - 虽然我已经重新设计了线路中的css，应该修复它 - 就我而言意识到..请帮忙！

这是我的代码：

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body style="background-image: url(http://www.lightbulb.im/BSC/MonthlySapphireBackground.png);background-repeat: no-repeat; display: block;">
    <div class="mainContainer" style="display: block;width: 900px;height: 1600px;">
        <div class="containerLatest" style="position: relative;top: 29%;left: 5.7%;width: 90%;height: 150px;border: 1px solid transparent;">

            <p class="standard" style="text-align: left;font-family: 'Roboto Slab','Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica;text-shadow: #333 0px 0px 1px;font-weight: 600;font-size: 11pt;letter-spacing: 0.05em;color: #ffffff;">Lisoums "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui ouscia deserunt mollit anim id est laborum." </p>
        </div>

        <div class="containerChoice" style="position: relative;top: 33.5%;left: 5.7%;width: 70%;height: 150px;border: 1px solid transparent;">
            <p class="heading" style="text-align: left;font-family: 'Futura', 'Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica;font-weight: bold;text-shadow: #333 0px 0px 1px;letter-spacing: 0.05em;font-size: 12pt;text-transform: capitalize;color: #ffffff;">Cool stone</p>
            <p class="choice" style="text-align: left;font-family: 'Roboto Slab','Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica;text-shadow: #333 0px 0px 1px;font-weight: 600;font-size: 11pt;letter-spacing: 0.05em;color: #ffffff;">isoums "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.   </p>
        </div>


        <div class="containerSpecial" style="position: relative;top: 54.3%;left: 5.7%;width: 60%;height: 149px;border: 1px solid transparent;">
            <div class="spacer" style="height: 55%;float: right;"> </div>
            <div class="block" style="float: right;clear: right;bottom: 0%;right: 0%;width: 25%;height: 40%;background-color: #252d37;"><p class="boxS" style="text-align: center;font-family: 'Roboto Slab','Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica;text-shadow: #333 0px 0px 1px;font-weight: 600;line-height: 20%;font-size: 10pt;letter-spacing: 0.05em;color: #ffffff;">was $300</p><p class="boxH" style="text-align: center;font-family: 'Futura', 'Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica;font-weight: bold;text-shadow: #333 0px 0px 1px;letter-spacing: 0.05em;font-size: 12pt;line-height: 90%
        text-transform: capitalize;color: #ffffff;">NOW $100!</p></div>
            <p class="inverted" style="text-align: left;font-family: 'Roboto Slab','Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica;text-shadow: #000 0px 0px 0.5px;font-weight: 600;font-size: 11pt;letter-spacing: 0.05em;color: #252d37;">Isoums "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                dolor in reprehenderit in voluptate velit esse cillum dolo</p>
        </div>

        <div class="linkContainer" style="position: relative;top: 31%;left: 12.1%;width: 673px;height: 63px;border: 1px solid transparent;"><a class="priceList" href="http://google.com" style="float: left;width: 232px;height: 62px;"></a><a class="stockList" href="http://yahoo.com" style="float: right;width: 232px;height: 62px;"></a></div>
        <div class="specialImage" style="position: relative;left: 100%;top: 36.4%;margin-left: -308px;width: 306px;height: 214px;background-image: url(http://www.lightbulb.im/BSC/specialGem.png);border: 1px solid transparent; display: block;"></div>
        <div class="clear" style="clear: left;"></div>
    </div>
        <a href="*|UNSUB|*">
    </a></body>
</html>

Gmail破坏了我的电子邮件模板CSS，我该如何阻止它？

0 个答案: