td堆疊不使用css

我們的CRM允許我們發送自動電子郵件給我們的客戶使用他們的軟件。諸如購物收據等等。雖然他們提供電子郵件的HTML編輯，但受到嚴格限制，我們可能不會使用任何CSS。td堆疊不使用css

至於什麼他們的風格指南確實允許，這似乎是所有的HTML和一些內聯樣式，例如：

<span style="color:#ffffff">white</span> 
<div style="color:#ffffff"> 
<img src="dickbutt.gif" style="width:30px;height:20px">

...都行根據指南。然而，沒有其他的CSS或CSS引用是允許的，包括：

<link rel="stylesheet" href="/stylesheet.css" type="text/css">

或

<style type="text/css"> 
@import "/stylesheet.css"; 
</style>

或

<style type="text/css"> 
body { color:green; } 
</style>

要雪上加霜，我應該在上面包括在此，將<body>標籤上的所有內容（包括主體標籤本身）都保存在其軟件內的HTML編輯器中後，將被刪除。他們有一些自動代碼修改腳本，引用其風格指南中的「已批准」代碼，並剝離剩下的內容。那麼我留下了什麼？幾乎沒有。基本上從開盤<table>到收盤</table>之間。他們甚至剝離出</body>和</html>。

隨着剩餘的代碼，我根本無法使用@media或允許任何<td>堆疊。那麼，他們是否有任何其他方式鏈接到您瞭解的樣式表？ ...一種方法，將允許堆疊無需訪問CSS？我基本上正在尋找一種方法來使這些電子郵件在上述限制條件下響應。

我上傳的風格指南的jsfiddle：https://jsfiddle.net/Lxfqus7f

來源

2015-09-15 solateor

看起來像你的風格指南包括一些使用內聯樣式：

<p>Our studio is <span style="color:purple">purple.</span></p> 
    Define sections of text that require different HTML <div> 
<div style="color:#FC8301"> 
    <h3>This title.</h3> 
    <p>This is sentence.</p> 
</div>

既然你自動生成的電子郵件，無論如何，爲什麼不乾脆讓這一張幻燈片並在變量中聲明你的樣式，並在適當的地方使用它們？

他們是剝離出全部樣式標籤？你能否在TD的開端隱藏一種風格？

<td><style>/*rules are for quitters!*/</style>Stuff</td>

來源

2015-09-15 17:44:50

感謝您的快速回復！發佈後不久，我進入並澄清了我的目標（在帖子的底部），該目標是根據樣式指南中列出的限制找出允許TD堆疊（或使電子郵件響應的另一種方式）的方法。 – solateor

對，爲什麼不把你想放入樣式表的CSS規則手動放入html中？我在想''東西東西東西' –

是的，是的100倍是的。每個設計過電子郵件模板的人都有同樣的抱怨。電子郵件的設計是大約在1999年的網頁設計。首先，忘記CSS引用只是內聯你所能做的所有事情，不要打擾@media標籤，忘記它們甚至存在。

表設計
想出一<table>作爲一個電子表格，<tr>作爲一個錶行和<td>爲表格單元。代替「堆疊」TD可以嘗試嵌套表。一張新桌子可以進入TD內部，並以某種Matryoshka娃娃風格時尚，您可以製作任何您想要的佈局。

<table> 
    <tr> 
     <td> 
     <table> 
      <tr> 
       <td>1</td> 
       <td>2</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>4</td> 
      </tr> 
     </table> 
     </td> 
     <td>5</td> 
    </tr> 
</table>

上述工作正常。

響應電子郵件
的話響應和電子郵件通常不會一起去。電子郵件客戶端呈現的內容受到嚴重限制，但有辦法解決此問題。就像將你的主桌的寬度設置爲100％並在每邊有兩個TD一樣。像這樣：

<table width="100%" cellspacing="0" cellpadding="0"> 
    <tr height="500px" valign="top"> 
    <td width="*" bgcolor="#00FFFF"> </td> 
    <td width="550px" bgcolor="#FF0000"> <center><br><br> <H1>Body</h1> </center> </td> 
    <td width="*" bgcolor="#00FFFF"> </td> 
    </tr> 
</table>

這裏是JSfiddle中的兩個例子。

http://jsfiddle.net/e8r9ky4x/

來源

2015-09-16 22:02:39 JoeyPhillips

在體內使用的風格標籤可能不是best of things to use甚至可能誘發許多Web開發人員嘔吐，但它IS a possibility to utilize in Email。

我強烈建議不要在你列出的案例之外以這種方式使用它，並且會建議所有客戶端進行HEAVY測試，因爲它有時會導致錯誤的結果。

我想讓你的內聯造型完成大部分繁重的工作，只需在體內使用樣式標籤就可以完成任何其他方式無法完成的工作。

以下是在GMAIL APP上工作的響應HTML電子郵件的一些優秀資源（它幾乎完全剝離了樣式標籤），並且應該有助於爲您提供創建電子郵件的最佳方式的基準。

混合編碼方法 - http://labs.actionrocket.co/the-hybrid-coding-approach

混合編碼終極版 - http://labs.actionrocket.co/the-hybrid-coding-approach-2

是混合正確的選擇 - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question

來源