5

私たちの電子メールテンプレートでは、現在、いくつかのOutlookバージョンで背景を有効にするために以下のコードを使用していますが、CSSプロパティをある程度エミュレートできるかどうかを確認するために、VMLに頭を悩ませようとしていますが、情報はほとんどありません。 VMLは不完全であるか、コンテキストに入れるのが難しいようです。

実際には、基本的に、主に対象となる2つのプロパティ、水平方向の中心、およびrepeat-xのみがあります。これらは非常に基本的なVMLで簡単にサポートできると思いますが、理解できません...

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="..." color="#000000"/>
</v:background>
<![endif]-->
4

1 に答える 1

4

私が掘り下げることができることから、VMLbackgroundタグは扱いにくいです。それらはあまり柔軟ではないようで、CSS要素のようにそれらを操作しようとするとどれだけの運が得られるかわかりません。

そうは言ってもshape、imageタグは（VMLの対応物と比較して）はるかに協調的であるように見えます。このトピックで私が見つけた最も興味深い記事はこれでした：http：//iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/

この記事によると、OutlookはCSSプロパティに遭遇すると、CSSプロパティを破棄する傾向があります（間違いなく発見したように）。次に、（画像ベースの）背景を適用するための2つの代替オプションを提供します。

  1. <body>HTMLのタグにCSSを介して背景画像を設定します。Outlookは明らかにこれを受け入れます。
  2. VMLを使用します。

ここで、この記事ではテーブルセルに背景を適用する方法について説明しますが、使用する手法は、他のコンテキストで背景を適用する場合にも同様に有効である必要があります。（最悪の場合、目的の視覚的なレイアウトが得られる場合は、テーブルの使用を検討することもできます）。

したがって、とにかく、記事の作成者が使用するVMLは次のとおりです。

<!--[if gte mso 9]>
    <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); (+ more CSS)' src="background url" />
    <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); (+ more CSS)'>
    <div>
<![endif]-->
<!-- An HTML table -->
<!--[if gte mso 9]>
    </div>
    </v:shape>
<![endif]-->

したがって、一目で画像を使用する場合は、CSSプロパティを画像タグ自体に直接定義できるはずです。他のオプションはshape、計算された背景を使用したいように見えるので、とにかくあなたにより適しているかもしれないを使用することです。この場合、ここにある仕様によるとhttp://www.w3.org/TR/NOTE-VML#：

VMLの形状とグループ要素は、CSS2ビジュアルレンダリングモデルに完全に参加しています。

この場合、上記の例と同様に、タグを使用してCSSプロパティを図形要素に適用しても問題はありませんstyle（上記の例を参照）。これにより、バックグラウンドリピートの問題に対処できます。

センタリングに関しては、仕様には次のように記載されています。

center-x、center-y

これらのプロパティを使用して、親コンテナボックス内の要素のブロックレベルボックスの中心を指定できます。

これにより、水平方向のセンタリングの問題が解決されます。詳細については...

形状要素とグループ要素には、コンテンツのブロックが含まれています。これらは、CSS2の「ブロックレベルボックス」を定義します。

shape...したがって、特定のレイアウトの問題は、包含要素または要素を適用することで解決できるはずgroupです。

于 2012-12-24T08:47:47.677 に答える