outlook郵件中樣式問題


目前要做一個定時發送郵件的功能,郵件的大致內容布局如下:

HTML中

在QQ郵件中,可以進行正常顯示。

在outlook網頁版,也可以正常顯示,

outlook客戶端

但是到了客戶端就會出現很多很神奇的問題,基本樣式全丟,浮動不支持,定位不支持,所以很多樣式都亂了,后來百度一下才知道OUTLOOK是按照word的方式解析的,很多樣式,標簽都不支持,不支持內部樣式表,所以只能寫內聯,等等兼容問題,這里記錄一下:

首先outlook支持傳統的table 布局,不支持浮動,定位布局。所以寫的時候就要注意這一點。

1.內部樣式表,外聯樣式表,JS不支持

這里寫樣式的話,只能寫內聯

2.table樣式初始化,將內部邊距合並

和普通瀏覽器一樣都是為table 本身添加cellpadding="0" cellspacing="0"屬性

3.border問題

給每一個td添加邊框

<td style="border: 1px solid #919191!important;"></td>

 再通過border-collapse:collapse對邊框進行合並

<table cellpadding="0" cellspacing="0" style=" border-collapse:collapse;">

4.margin,padding問題

在outlook的客戶端,table上下的margin 會失效,這里參考網上使用hspacevspace,但是並沒有效果,所以我采用了比較low的方式,填補了空元素來完成間隔

關於padding會自動添加,這里我為每一個td進行了樣式清空 padding為0的方法來解決

5.line-height問題

mso-line-height-rule:exactly是微軟的CSS屬性,對其他無效,作用於塊級元素
<td style="mso-line-height-rule:exactly; line-height:33px;">

6.浮動問題

左右浮動可以使用align="left"/"right"來實現

首先為大盒子定一個width,然后設置align="center",里面的img 注意不要設置align="right" 就可以實現圖片在width中 右浮動

7.colspan,rowspan實現問題

這個我測試了依稀,在outlook客戶端是可以被識別的,所以可以繼續使用該屬性

8.圖片問題 注意使用線上絕對路徑的src值,防止圖片找不到

9.對於字體居中問題

要使每一個td里面的數據都居中對齊,需要結合使用

 <td align="center" style="text-align:center;">0</td>

有的不繼承table中的字體居中屬性,所以只能一個個設置

10.背景色問題

我曾經在網頁中使用灰色作為背景,table為白色,來突出,到了客戶端則全屏變為灰色,這里只要將bgcolor="#fff" 改成白色就可以了

 這里放一個相關outlook內置html的較為詳細的介紹鏈接,方便以后查看

11.這里補充一個點  十六進制顏色 的 縮寫有的outlook也是不支持的 bgcolor="#f60" 這個顏色無法識別 只能寫全 #ff6600 才可以識別

2018.0515

發現了一種新模式:

用提供的表格模版.excel 另存為.html 在用編譯器打開,作為模版文件 進行嵌套

部分內容展示:

<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 14">
<style>
<!--table
	{mso-displayed-decimal-separator:"\.";
	mso-displayed-thousand-separator:"\,";}
@page
	{margin:.75in .7in .75in .7in;
	mso-header-margin:.3in;
	mso-footer-margin:.3in;}
.style0
	{mso-number-format:General;
	vertical-align:bottom;
	white-space:nowrap;
	mso-rotate:0;
	mso-background-source:auto;
	mso-pattern:auto;
	color:black;
	font-size:11.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:����, sans-serif;
	mso-font-charset:134;
	border:none;
	mso-protection:locked visible;
	mso-style-name:��ͨ;
	mso-style-id:0;}
rt
	{color:windowtext;
	font-size:9.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:����, monospace;
	mso-font-charset:134;
	mso-char-type:none;
	display:none;}
-->
</style>

html標簽:
 <col width=82 style='mso-width-source:userset;mso-width-alt:2998;width:82pt'>

  是excel本身的樣式,單位,標簽形式

兼容性:網頁端和部分客戶端outlook支持

最后得到了最簡單的模版:

1.公用內部樣式表:

<style>td{border-bottom:1px solid #d9d9d9;border-left:1px solid #d9d9d9;text-align:center;font-size:14px}</style>

2.table的內聯樣式(寬度根據需要定義)

<table width="880" border="0" cellspacing="0" cellpadding="0">

3.td內聯樣式(不需要每一個進行padding margin的清空 )

   <td width="110" rowspan="2" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">品牌事業部</td>
width 內容確定 所以給了定值 rowspan colspan 跨行 跨列 bgcolor 是背景色 之后的內聯樣式 是根據特殊情況 字體加粗,大小等樣式的控制

 

效果圖: 

代碼展示:

<table width="880" border="0" cellspacing="0" cellpadding="0"><tr><td style="text-align:right;border:none;vertical-align:middle;padding:14px 0 8px"><img src="http://static.yuntongauto.com/yth/images/cw-logo.png" /></td></tr></table>

<table width="880" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="8" style="text-align:center;border:none;font-size:40px;border-bottom:1px solid #f2f2f2;color:#9e1423;padding-bottom:20px">用品系統周報表</td>
  </tr>
  <tr>
    <td height="50" colspan="4" style="font-weight:bold;text-align:left;border:none;font-size:15px"> 開始日期:2018/3/26   結束日期:2018/4/1</td>
    <td colspan="4" style="font-weight:bold;text-align:right;border:none;font-size:15px">單位 :元   </td>
  </tr>
  <tr>
    <td height="50" colspan="8" bgcolor="#157dd1" style="font-weight:bold;color:#fff;font-size:20px;border:none">全國匯總(已切換系統)</td>
  </tr>
  <tr>
    <td width="110" rowspan="2" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">品牌事業部</td>
    <td width="110" height="32" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">訂單金額</td>
    <td width="110" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">銷售金額</td>
    <td width="110" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">成本</td>
    <td width="110" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">毛利</td>
    <td width="110" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">毛利率</td>
    <td width="110" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">單車收入</td>
    <td width="110" bgcolor="#f0f0f0" style="font-weight:bold;border-right:1px solid #d9d9d9;font-size:15px">單車毛利</td>
  </tr>
  <tr>
    <td height="32" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">本周</td>
    <td bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">本周</td>
    <td bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">本周</td>
    <td bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">本周</td>
    <td bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">本周</td>
    <td bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">本周</td>
    <td bgcolor="#f0f0f0" style="font-weight:bold;border-right:1px solid #d9d9d9;font-size:15px"><span style="font-weight:bold;font-size:15px">本周</span></td>
  </tr>
  <tr>
    <td height="32" style="font-weight:bold">匯總</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td style="border-right:1px solid #d9d9d9"> </td>
  </tr>
  <tr>
    <td height="32" style="font-weight:bold">事業一部</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td style="border-right:1px solid #d9d9d9"> </td>
  </tr>
  <tr>
    <td height="32" style="font-weight:bold">事業二部</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td style="border-right:1px solid #d9d9d9"> </td>
  </tr>
  <tr>
    <td height="32" style="font-weight:bold">事業三部</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td style="border-right:1px solid #d9d9d9"> </td>
  </tr>
  <tr>
    <td height="32" style="font-weight:bold">事業四部</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td style="border-right:1px solid #d9d9d9"> </td>
  </tr>
  
</table>

  

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM