10

私はレポートを作成しており、レポート内でさまざまなプロバイダーからのメールをレンダリングする必要があります。このメールには独自の css が付属しています (通常はインライン css ですが、一般的なスタイルが適用されることもあります)。私は通常、iframes を使用して css をカプセル化するので、私のものは壊れませんが、今は使用できません。

iframe を使用せずに CSS をカプセル化する方法はありますか?

これが私が抱えている問題の例です:

<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は有効でなければならないので、どんな提案も素晴らしいでしょう!

4

2 に答える 2

5

CSS セレクターの前に追加#emailして、div のみに適用することができます。

たとえば、

.classname { display: block }

に

#email .classname { display: block }

編集: arxanas が提案するように電子メール CSS を制御できない場合は、LESSの使用を検討してください。Less は、CSS セレクターのネストを可能にする CSS プリプロセッサーです。less.js を含めると、次のようなことができます。

#email {
    CSS goes here
}

less.js はこれを解析して CSS に変換します。

于 2012-08-28T20:16:04.463 に答える
1

独自のクラス名との衝突について、電子メール css 部分をチェックしてみてください。あなたに役立つかもしれないこの投稿を見つけました： Javascriptを使用して既知のCSSクラスをリストする

于 2012-08-28T20:15:49.590 に答える