java 傳送郵件 css-style 樣式丟失錯亂問題，有解決方案

老马啸西风發表於2024-12-07
JavaCSS

郵件系列

java 如何實現傳送郵件 email?

java 搭建屬於自己的郵件伺服器

java 傳送郵件 css-style 樣式丟失錯亂問題，有解決方案

java 傳送郵件-04-java 郵件傳送 http 介面如何定義？

開源專案

email: 一行程式碼實現郵件傳送

前言

大家好，我是老馬。

大家日常開發，對於郵件傳送應該能不陌生。本系列就讓我們一起學習一下郵件相關的內容。

問題描述

使用 email 傳送郵件時，發現所有的 css 樣式丟失。

感覺有些奇怪，看了下郵件設定也是 html 格式。

後來一想就知道原因了，其實郵箱也是基於 css 顯示的，如果郵件內容有全域性格式，肯定會導致顯示，甚至安全問題。

所以去查了下相關原因，並且記錄下自己的解決方案。

問題原因

使用java傳送html到qq郵箱後，發現採用“外部樣式表”的css都沒有

外部樣式表：

<link rel="stylesheet" type="text/css" href="css/my.css">

推測郵箱是從出於安全策略（推測是防止CSRF跨站請求偽造）才會過濾掉外部引用的，為了繞過這個攔截，改為使用“內部樣式表”寫法

<head>
    <style type="text/css">

    </style>
</head>

傳送後qq郵箱可以了，但是126郵箱不行，126郵箱比qq郵箱更嚴格，居然把style標籤裡的內容全部過濾掉了，這說明不同的郵箱過濾策略不一樣。

那大企業發的郵件，為啥樣式都顯示正常？

為了一探究竟就找了領英的郵件看了看，發現它將樣式都寫在標籤了，也就是“內聯式”寫法。

傳送郵件的郵件內容，可以去掉head、body，只留需要的部分，因為，郵箱會過濾head、body，並將這個兩個標籤的樣式全部過濾掉，所以傳送html郵件時，直接上內容就好，比如

<div style="background-image: url('http://domain:port/a.png');font-size:14px;">
  <h1 style="text-align: center;">郵件標題</h1>
  <p>郵件內容</p>
</div>

內嵌式格式解決方案

這種我們當然不可能一個個手動去改，這樣就太笨了。

類似的框架網上比較多，CssToInlineStyles-PHP 和 juice-JS。

如果你有需求，可以考慮使用符合自己語言的，比如 java。

此處我只是簡單使用下，所以採用了網頁版本 網頁版-juice。

傳送轉換後的 html，發現顯示正常。

開源框架

email 傳送

email-java 傳送工具

css

CssToInlineStyles

Juice inlines CSS stylesheets into your HTML source.

網頁版-juice

參考資料

HTML 郵件相容問題

在傳送郵件HTML中，CSS等問題

傳送郵件到qq郵箱、126郵箱後丟失樣式

相關文章