HTML電子郵件中的內嵌邊框樣式

我正在處理響應HTML電子郵件，並且在Gmail中只有在IE中出現渲染問題（只是必須！）它在其他27個客戶端變體中正常工作。我們需要支持HTML電子郵件中的內嵌邊框樣式

我已經在這裏設置一個小提琴：http://jsfiddle.net/39gzj/

現在，如果你看一下代碼，你會看到有一個邊界是灰色的，然後包含另一個邊界是白。出於一些奇怪的原因，瀏覽器中的Gmail根本不會顯示此邊框，除了註冊底部底部的邊框外。我認爲這與我編碼邊界的方式有關（我要脫掉別人的代碼，我只做了一些小改動），因爲邊界已經完成如下：

border-left-style:solid;border-left-width:1px;border-left-color:#fff;

所以我改變了邊境灰色和白色如下，以聲明的方式：

border-left-style: 1px solid #fff;

但是，這是沒有任何區別。這讓我瘋狂，所以請儘可能幫忙。我認爲這可能與寬度有關？但是在這個問題上玩了一下，它就把所有其他客戶的問題都打破了。任何幫助將不勝感激，因爲我很快就會把我的腦袋砸進電腦屏幕。

欣賞此代碼包含瘋狂的內聯樣式，但這當然是HTML電子郵件的本質。

更新：刪除<td>元素上的白色內邊框呈現灰色邊框。這是否與我做不正確的寬度設置？

更新2：這是IE9，這是不正確的渲染，並且只適用於Gmail。

來源

2013-04-16 zik

，你可以嘗試這樣的 '左邊框添加CSS：1px的固體#FFF;' –

那豈不是隻是' border-left'而不是'border-left-style'？這種風格指的是線條的類型，在你的情況'固體' –

謝謝你們，要用這個運行，並通過石蕊試驗。 – zik

你的問題是邊框在桌子上。你傾向於發現電子郵件客戶端不喜歡那樣。我周圍有這個方法是通過將表內的表有點像這樣：

<table width="600" cellpadding="0" cellspacing="0" border="0"> 
<tr> 
<td width="600" valign="top" align="center" bgcolor="#CCCCCC"> 
    <img src="spacer.gif" width="1px" height="1px" style="border:0px; display:block;"> 
    <table width="598" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF"> 
    <tr> 
    <td width="598" align="left"> 
    Text Here 
    </td> 
    </tr> 
    </table> 
    <img src="spacer.gif" width="1px" height="1px" style="border:0px; display:block;"> 
</td> 
</tr> 
</table> 
    <br/><br/><br/> 
<table width="600" cellpadding="0" cellspacing="1" border="0" bgcolor="#CCCCCC"> 
<tr> 
<td width="600" valign="top" align="left" bgcolor="#FFFFFF"> 
    Text Here 
</td> 
</tr> 
</table>

這裏是一個代碼：我已經創建了兩種不同的方式來獲得類似的效果jsfiddle 。你可以選擇最適合你自己的那個。

我也看到你已經使用了一些電子郵件客戶端不喜歡的最大寬度，這可能是你的問題。這裏是運動監視器指南的CSS類，你應該和不應該使用：http://www.campaignmonitor.com/css/

來源

2013-04-16 10:05:20 Andrew

感謝您的答覆哥們。問題是我發佈的代碼，已經是「表格內的表格」。最煩人的是，這個代碼適用於除Gmail之外的每個電子郵件客戶端，並且僅適用於IE。我知道'最大寬度'的問題，但我們用它來處理很多電子郵件，這還不是一個問題（我有很多誘惑的命運！） – zik

我應用我的邊界的方式與你自己。我正在使用一個小的間隔圖像給出一個1px的頂部邊框，而對於左側和右側的邊框，我的內部桌子比較大的桌子稍微小一點，並且它被告知要對齊顯示邊框外觀的中心。我遇到過這個問題很多次了，我找到的解決方案 – Andrew

好的謝謝。我會給這個旋轉。如果是我，我會使用1px填充內表，然後給外表灰色邊框。該死的HTML電子郵件。 – zik

我在我的電子郵件的表中使用以下，並沒有問題。

border-left: 2px #000000 solid;border-right: 2px #000000 solid;

我已經在多個瀏覽器&電子郵件客戶端進行測試。確保你的樣式是內聯的，確保你沒有在任何外表上有不同的邊框，因爲Outlook等似乎從父類繼承TD

我在IE9和Gmail中遇到的問題突出給我是它呈現了我的電子郵件的響應版本，因此請檢查您的媒體查詢。解決這個問題的方法是，如果您有<td width="600">，你需要確保它成爲<td width="600" style="width:600px;">

來源

2015-07-07 17:22:24 Eoin

HTML電子郵件中的內嵌邊框樣式

回答

相關問題