我在想，是否有可能用與上面的按鈕相同的padding來做邊框。解決辦法似乎是在我給td添加邊框的時候，但我不能這樣做，因為在其他客戶端，邊框有border-radius，而在這里是看不到的。有什么想法嗎？謝謝
。第二個按鈕的代碼:
。<!-- BUTTON -->
< table bgcolor="#ffffff"/span> border="0" cellpadding="0" cellspacing="0" class="fluid"
role="presentation" width="600">
<tr>
< td align="center" bgcolor="#ffffff" style="padding。0 0 40px 0;"
valign="top">
< table align="center"/span> border="0" cellpadding="0" cellspacing="0" "0"
class="main-button-mob-width" role="presentation"
style="max-width: 80%; min-width: auto;">
<tr>
<td align="center" bgcolor="#ffffff"<
class="out-main-button-padding"
style="border-radius: 50px; padding: 0; font-family:
NIVEaBrandType-Bold, 'Arial Black', Gadget, Arial,
Helvetica, sans-serif; font-size: 18px; font-weight: bold;
line-height: 22px; mso-text-raise: 4px;"
valign="top"/span>>
<a class="out-main-button-a"
href="https://nivea.com"/span> style="display: block;
border-radius: 50px; background-color: #ffffffff;
邊界。3px solid #061539;
mso-border-alt: 8px solid #061539;
padding: 15px 35px 15px 35px; mso-padding-alt: 4px;
顏色。#061539; text-decoration: none;"
target="_blank" title=""> title=">
<span style="color: #061539; text-decoration: none;
背景顏色。#ffffff">INVITA A TUS AMIGOS
</span>
</a>/span>
</td>/span>
</tr>/span>
</table>/span>
</td>
</tr>/span>
</table>/span>
<!-- BUTTON end-->uj5u.com熱心網友回復：
在Outlook中，你不能把一個行內元素如<a>改為塊元素（display:block）。所以它忽略了填充、邊距等，因為這些是塊元素的樣式。
因此，為了實作跨郵件的兼容性，您需要在<td>上添加填充（這不會擴展可點擊的部分，而只是使其看起來像按鈕更大，或者，您可以應用Mark Robbins所描述的黑客。
解決方案1：（最簡單的）TD按鈕
< td align="center" bgcolor="#ffffff"<
class="out-main-button-padding"
style="border-radius: 50px; padding: 15px 35px 15px 35px;
border-radius: 50px; background-color: #ffffffff;
邊界。3px solid #061539;
mso-border-alt: 8px solid #061539;
mso-padding-alt: 4px; font-family:
NIVEaBrandType-Bold, 'Arial Black', Gadget, Arial,
Helvetica, sans-serif; font-size: 18px; font-weight: bold;
line-height: 22px; mso-text-raise: 4px;"
valign="top"/span>>
<a class="out-main-button-a"
href="https://nivea.com"/span> style="display: block;
color: #061539; text-decoration: none;"
target="_blank" title=""> title=">
<span style="color: #061539; text-decoration: none;
背景顏色。#ffffff">INVITA A TUS AMIGOS
</span>
</a>/span>
</td>
我所做的只是將塊級樣式從<a>移到<td>。你仍然可以在<a>上保留display:block，以使那些支持該功能的電子郵件客戶端的可點擊區域更大。
解決方案2：Mark Robbin的A按鈕
<a href="https://example. com/" style="background: #333; border: 2px solid #f00; text-decoration: none; padding: 15px 25px; 顏色。#fff; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#333"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt" hidden> < /i> <! [endif]--><span style="mso-text-raise: 15pt;">鏈接文本</span><! --[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%" hidden> </i><！[endif]-->
</a>
通過改變letter-spacing值（在鏈接文本的左邊和右邊）來改變左邊和右邊的padding。
通過改變mso-text-raise中的<span>值來改變底部的padding。
通過改變mso-text-raise中的<i>的值來改變頂部的padding。
（詳細解釋見https://www.goodemailcode.com/email-code/link-button）
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/321023.html
標籤：