# edm製作~~踩坑~~筆記
搜集edm製作出現的跑板問題與最後的解法

## outlook桌機版
### 1.有背景色塊的內文行高增高
**問題：**
雖沒有設定行高，內文變高還是變高

**推測：**
設定在 table 的 padding 被轉移到內層的td，導致行高變高

**解法：**
1.不要設定padding在table，要設定在更外層的td
2.若無可在外面再包一層table

**（外層table灰框）**
<table width="94%" bgcolor="#eee" border="0" align="center" cellpadding="0" cellspacing="0" style="background-color:#eee">
<tbody>
<tr>
<td align="center" bgcolor="#eee" style="padding:20px 40px; background-color:#eee">
**（內層table文字）**
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
    <td align="left" valign="top" style="font-size: 16px;line-height:1.5;font-family:微軟正黑體,Arial,Geneva,sans-serif,新細明體;"> ☉ <a href="https://library.itri.org.tw/guide/activity-content.aspx?actno=78" style="text-decoration:none;color:#1654b9" target="_blank">轉知~ ACS 讓 SDGs 深入我們的 DNA 資料查找活動 ( 10/3~11/27 )</a> </td>
    </tr>
    <tr>
    <td align="left" valign="top" style="font-size: 16px;line-height:1.5;font-family:微軟正黑體,Arial,Geneva,sans-serif,新細明體;"> ☉ <a href="https://library.itri.org.tw/guide/activity-content.aspx?actno=89" style="text-decoration:none;color:#1654b9" target="_blank">9/1 起新增為您推薦服務，推薦與您研發相關的提案參考資訊，歡迎使用！</a> </td>
    </tr>
    <tr>
    <td align="left" valign="top" style="font-size: 16px;line-height:1.5;font-family:微軟正黑體,Arial,Geneva,sans-serif,新細明體;"> ☉ <a href="https://library.itri.org.tw/guide/activity-content.aspx?actno=88" style="text-decoration:none;color:#1654b9" target="_blank">【主題書展】跳脫框架思維</a> </td>
    </tr>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>

### 2. 有包含img的 td 背景色消失

**推測：**
td內有包含 img ，背景色設定消失，且將背景色設定在父層也無效
**解法：**
1.將圖片寬度設`width:100%; `撐滿外層td（但測出來還是有一點點縫縫）
3.移除背景色

<table width="100%" height="auto" bgcolor="#ffffff"(不顯示)  border="0" align="center" cellpadding="0" cellspacing="0" style="background-color: #ffffff">
<tbody>
<tr>
<td width="20%" bgcolor="#ffffff"(不顯示)><img align="left" style="width:100%; height:auto" src="https://res.cloudinary.com/itri17d2/image/upload/v1670896752/edm-itsc/library/logo_ygtxa9.gif" title="工研院圖書館" alt="工研院圖書館"></td>
<td width="60%" bgcolor="#ffffff" style="text-align:center;font-size:18px;color:#777777;font-family:微軟正黑體,Arial,Geneva,sans-serif,新細明體">—&nbsp;&nbsp;2023年1月&nbsp;&nbsp;—</td>
<td width="20%" bgcolor="#ffffff" style="padding-right: 10px; text-align:right;font-size:16px;font-family:微軟正黑體,Arial,Geneva,sans-serif,新細明體"> <a href="https://library.itri.org.tw/catalog/good-book.aspx" style="text-decoration:none" target="_blank"><font color="#333333">進館新書</font></a> │ <a href="https://library.itri.org.tw/catalog/fair-featured.aspx" style="text-decoration:none" target="_blank"><font color="#333333">主題書展</font></a></td>
</tr>
</tbody>
</table>

## outlook線上版
### 1. style消失
**問題：**
測試信部分 <td>內的 style 消失，導致跑版


**推測：**
若edm兩個td裡面的 style 設定完全一模一樣，後面的<td> style 會被吃掉（第一次遇到這種問題，不確定是不是常態）

**解法：**
1. 將部分<td>css 移到外層
2. 將部分css微調的不一樣，就會顯示

### 2. a 連結失效

**推測：**
a連結若無網址，outlook測試信會把a連結直接刪除，style也一起刪掉，導致跑版

<a href="#" style="XXXX">內文 </a> 整個標籤被刪掉

解法：
將a連結內放入假網址就會正常

## 其他筆記
1.圖片與文字放在一起時，可用 `vertical-align` 調整圖片位置（此語法所有版本都支援）
2.盡量使用偶數的行高與字級，可減少出現橫的線條
3.若需要空白，可用 `&nbsp;` 增加間距
5.考慮手機版，須加入`<meta name="viewport" content="width=device-width, initial-scale=1">
`
6.edm寬度最好介於600~900之間(參考：https://shopstore.tw/article/220)
## 可能有用的參考資料

[ Can I email](https://www.caniemail.com/search/?s=mar)
[常見問題](https://www.emailonacid.com/blog/article/email-development/how-to-code-emails-for-outlook-2016/)