用於郵寄的 HTML、CSS

Question

我正在為我的公司製作一些新聞通訊，我們正在處理不同電子郵件用戶端的一些問題，例如。 Gmail、線上 Outlook、應用程式 Outlook、這些客戶的行動版本。

其中每個文字看起來都不同。問題還在於，該 Outlook 應用程式不正確支援

和

。所以我必須將其轉換為 table 和 spans。

是否有任何建議，如何透過某些程式碼使設計在大多數電子郵件用戶端中看起來相同？

當前程式碼如下所示

<div style="background-color: white; margin-right: 9px; margin-left: 9px; padding-bottom:1px; margin-bottom:10px;">
    <table style="background-color: white; border-color: black;padding-bottom:1px; margin-bottom:10px;">
    <tbody>
    <tr>
    <td>
    <h3 style="color: #000000; font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 16px; font-style: normal; line-height: 24px; letter-spacing: normal; text-align: left; display: inline-block;"> Hello, </h3>
<br />
    <span style="font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 13px; line-height: 18px; font-style: normal; font-weight: normal; color: #787878;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla turpis magna<br />   cursus sit amet, suscipit a, interdum id, felis. Ut tempus purus at lorem. <br />  Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. <a href="https://blog.inpage.cz/obrazek/2/kitten-jpg/">here</a>.<br /> <br />  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</span>
    </td>
    </tr>
    <tr>
    <td><img style="text-align: left; width: 275px; height: 105px; margin: 10px; border-width: 0px; border-style: solid; float: left;" src="https://blog.inpage.cz/obrazek/2/kitten-jpg/" alt="CAD" /></td>
    </tr>
    <tr>
    <td>
    <h2 style="color: #f26503; font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 24px; line-height: 36px; text-align: center;"><u>here, lorem</u></h2>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    <span style="line-height: 0.1; padding:1px; margin:10px;">
    
    </span>

P粉268284930471 天前669

Answer 1

不幸的是，電子郵件提供者不支援 html 和 css 中的大多數元素。我知道有可靠的文件可以在這個主題上為您提供幫助。您可以透過瀏覽找到支援的元素和 CSS，並相應地更改您的模板。

https://elasticemail.com/supported-css

https://www.campaignmonitor.com/css/selectors/class/

#