封裝css

我正在做一個報告，並在報告中，我必須呈現來自不同提供商的電子郵件，這封電子郵件帶有自己的css（通常是內聯css，但有時他們適用一般樣式）。我通常使用iframe來封裝css，所以它不會打破我的，但我現在不能使用它。封裝css

有沒有一種方法來封裝css而不使用iframes？

這裏是我遇到的問題的一個例子：

<html> 
    <head> 
    <style> 
     // I enclose it to content so it doesn't override the email css 
     #my_content table, #my_content p { 
     color: black; 
     } 
    </style> 
    </head> 
    <body> 
    <div id='my_content'> 
     ... some stuff ... 
    <div id='email'> 
     <html> 
      <head> 
      <style> 
       table { 
       margin-left: 100cm; // screws up all my tables 
       } 
       .... some styles that should only apply inside the email div ... 
      </style> 
      </head> 
      <body> 
      .... email content ... 
      </body> 
     </html> 
     </div> 
    </div> 
    </body> 
</html>

我可以提取HTML結構和剛剛得到什麼的對身體，但再不是所有我的電子郵件會看，因爲它應該。此外，該HTML必須是有效的，所以任何建議將是偉大的！

來源

2012-08-28 Hassek

所以你不使用類？ – ChaosPandion

是的！使用'scoped'屬性。然而，我不相信它支持任何地方。（好吧，你可以在Chrome瀏覽器中用'chrome：// flags'打開它。） – Ryan

我確實使用了類，讓我在問題中更好地解釋電子郵件如何破壞我的css – Hassek

你可以嘗試檢查電子郵件的css部分是否與你自己的類名衝突。我剛剛發現這個帖子裏面能爲您有所幫助： Listing known CSS classes using Javascript

來源

2012-08-28 20:15:49 Andre

一旦完成了，他應該怎麼做？ –

我明白了，他可以試着用稍微修改過的標識符來替換那些碰撞，但那不會像只像hayk一樣簡單地使用css。 mart – Andre

您可以在前面加上#email你的CSS選擇器，使它們只適用於您的股利。

例如，更改

.classname { display: block }

到

#email .classname { display: block }

編輯：如果你有超過電子郵件CSS沒有控制，arxanas建議，可以考慮使用LESS。 Less是允許嵌套CSS選擇器的CSS預處理器。如果包括less.js，那麼你可以做這樣的事情：

#email { 
    CSS goes here 
}

less.js將解析這個並將其轉換爲CSS。

來源

2012-08-28 20:16:04

我認爲問題在於樣式正在加載並且他無法控制它們。 –

感謝arxanas的澄清，我爲此增加了一個建議O操作。 –

是的我是無法控制的css因爲是電子郵件的一部分 – Hassek

回答

相關問題