多個CSS類不工作

我正在將docx轉換爲html格式（使用apache poi）並將它作爲電子郵件發送。多個CSS類不工作

生成HTML片段看起來像這樣

<html> 
 
<head> 
 
\t .... 
 
\t <style> 
 

 
\t \t span.Normal{ 
 
\t \t \t font-family: 'Arial';font-size: 9.0pt; 
 
\t \t } 
 

 
\t \t span.Title{ 
 
\t \t \t font-family: 'Cambria';font-size: 28.0pt;color: #000000; 
 
\t \t } 
 

 
\t \t span.MySubtitle{ 
 
\t \t \t font-family: 'Arial';font-size: 18.0pt;color: #000000; 
 
\t \t } 
 

 
\t \t span.MyTitle{ 
 
\t \t \t font-family: 'Arial';font-size: 22.0pt;font-weight: bold;color: #000000; 
 
\t \t } 
 

 
\t ... 
 
\t </style> 
 
</head> 
 
<body> 
 
.... 
 

 
\t <p class="Normal Title MyTitle"> 
 
\t \t <span id="_GoBack"> 
 
\t \t \t <span class="Normal Title MyTitle">Welcome Message</span> 
 
\t \t \t <span class="Normal Title MyTitle"> </span> 
 
\t \t \t <span class="Normal Title MyTitle">Username</span> 
 
\t \t </p> 
 
\t \t <p class="Normal Title MySubtitle"> 
 
\t \t \t <span class="Normal Title MySubtitle">Issues and Solutions</span> 
 
\t \t </p> 
 

 
\t ... 
 
</body> 
 
</html>

的多個CSS類不是由Outlook客戶端的認可。它只渲染第一個CSS類「正常」而忽略其餘部分。但是我的原始格式（在docx中）出現在「MyTitle」&「MySubTitle」類中。

Outlook支持多個css嗎？有沒有一種方法可以控制多個CSS代。

來源

2016-08-26 Fayaz

您的問題可能與[CSS樣式將無法在Outlook 2010中工作？]（http://stackoverflow.com/questions/8310609/css-styling-wont-work-in-outlook-2010）。爲了幫助調試，您也可以嘗試更改各個類的內容。也許Outlook _can_支持多個類，但是您的特定樣式不起作用。例如，嘗試'font-family'，'font-weight'，'color'等單獨的類。 –

[這裏]（https://www.campaignmonitor.com/css/）是確定HTML和CSS與幾個電子郵件客戶端兼容。 –

好的，這裏有很多錯誤。首先，HTML並不是真的正確。段落中嵌套了段落，並且您正在使用跨度來定義標題，並將每個單詞分成它自己的跨度。

我不知道這三個點的開頭和結尾是什麼，但它們不應該在樣式標籤中。

你的類名不是真正的描述性的，它們重複規則，每個類都應用於每個元素，而且它們在樣式表中混亂不清，使得理解發生的事情變得混亂。

我的建議是：

使用語義標記
丟棄類和使用語義選擇
使用DRY原則（不要重複自己）
與邏輯順序列表規則例如從最大開始到最小結束。

下面是一些重構代碼，使用您的樣式規則和演示如何使用每個元素。

<html> 
 
\t <head> 
 
\t \t <style> 
 
\t \t \t body { 
 
\t \t \t \t color: #000000; 
 
\t \t \t } 
 
\t \t \t h1, 
 
\t \t \t h2, 
 
\t \t \t p { 
 
\t \t \t \t font-family: 'Arial'; 
 
\t \t \t } 
 
\t \t \t h3 { 
 
\t \t \t \t font-family: 'Cambria'; 
 
\t \t \t } 
 
\t \t \t h1 { 
 
\t \t \t \t font-size: 28pt; 
 
\t \t \t } 
 
\t \t \t h2 { 
 
\t \t \t \t font-size: 22pt; 
 
\t \t \t } 
 
\t \t \t h3 { 
 
\t \t \t \t font-size: 18pt; 
 
\t \t \t } 
 
\t \t \t p { 
 
\t \t \t \t font-size: 9pt; 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <h1>Heading 1</h1> 
 
\t \t <h2> 
 
\t \t \t Heading 2 
 
\t \t </h2> 
 
\t \t <h3> 
 
\t \t \t Heading 3 
 
\t \t </h3> 
 
\t \t <p> 
 
\t \t \t This is paragraph text. 
 
\t \t </p> 
 
\t </body> 
 
</html>

來源

2016-08-31 21:25:45 Longblog

這個html是由apache-poi自動生成的。我沒有任何控制權。三個點代表更多的代碼。 – Fayaz

正如前文所說，你應該首先檢查你的HTML使它更清潔。在那裏的每一個郵件客戶端/服務器上，電子郵件都很難找到正確和完美的東西。因此，如果您想要把事情做好，請查看網絡上任何地方的免費和響應式模板。

經典而高效的郵件解決方案依賴於表標籤。

你可以找到一個good example here

而且，當涉及到顯示器上的不同的郵件客戶端，Outlook將是最困難的一個。有像Litmus這樣的工具可以讓你預覽你的電子郵件的結果，但它非常昂貴。幸運的是，他們還建議free responsive templates，你可以使用靈感。

不要猶豫，發佈您的電子郵件的改進版本，所以我們可以看看它，並幫助您更有效地。

來源

2016-09-05 16:05:25 P13

多個CSS類不工作

回答

相關問題