[筆記] Email html 模版撰寫樣式注意事項 @地瓜大的飛翔旅程

章節連結

內容

前一陣子在編輯既有的 Email html 模版給後端使用時，發現有一些 html 標籤是會被忽略的，因此要避免將 style 樣式寫在這一層。
這邊筆記下可能會被忽略的標籤。

內容

若你的模版有 mso 前綴的 class，這是 Microsoft Outlook 的專屬樣式，所以在 Gmail 是不會顯示的。因此區塊的顏色、文字大小…等，盡可能的離實際期望目標近一些，避免用繼承的方式。

// Suggestion
<span class="msohide es-button-border" style="border-width:0px;display:block;border-radius:100px;width:auto;">
    <a href="" 
       target="_blank" 
       style="background-color:#FBAD1D;text-decoration:none;color:#000;font-size:16px;padding:10px 20px;display:block;border-radius:100px;font-family:Arial, sans-serif;">
        Test
    </a>
</span>

// 不推薦
<span class="msohide es-button-border" style="background-color:#FBAD1D;border-width:0px;display:block;border-radius:100px;width:auto;">
    <a href="" 
       target="_blank" 
       style="text-decoration:none;color:#000;font-size:16px;padding:10px 20px;display:block;border-radius:100px;font-family:Arial, sans-serif;">
        Test
    </a>
</span>

// Suggestion

<a href=""

target="_blank"

style="background-color:#FBAD1D;text-decoration:none;color:#000;font-size:16px;padding:10px 20px;display:block;border-radius:100px;font-family:Arial, sans-serif;">

Test

</a>

</span>

// 不推薦