Outlook VML, эмулировать повтор CSS / позиционирование

Для наших шаблонов электронной почты мы в настоящее время используем код ниже, чтобы включить фоны в некоторых версиях Outlook, однако я пытался обернуть голову вокруг VML, чтобы посмотреть, возможно ли в некоторой степени эмулировать свойства CSS, но мало информации Я считаю, что на VML кажется неполным или трудно выразить в контексте.

На практике есть два основных свойства, которые в основном представляют интерес: горизонтально по центру и только повторение х. Я бы предположил, что это настолько простой 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]-->
Источник

1 ответ

Решение

Из того, что я могу выкопать, VML background с тегами сложно работать. Они не кажутся очень гибкими, и я не уверен, сколько удачи вам придётся пытаться манипулировать ими, как если бы вы были элементом CSS.

Это сказало, shape а также image теги кажутся гораздо более кооперативными (по сравнению с их аналогами VML). Самая интересная статья, которую я нашел по этой теме, была следующей: http://iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/

В статье говорится, что Outlook склонен выбрасывать свойства CSS, когда сталкивается с ними (как вы, несомненно, обнаружили). Затем он предлагает два альтернативных варианта применения фонов на основе изображений:

  1. Установите фоновое изображение с помощью CSS на <body> тег HTML. 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 тег (как показано в приведенном выше примере). Это должно позаботиться о вашей проблеме повторения фона.

Что касается центрирования, то в спецификации говорится следующее:

центр-х, центр-у

Эти свойства могут использоваться для указания центра блока уровня блока элемента в его родительском контейнере.

Это должно решить проблему горизонтального центрирования для вас. Для информации...

Элементы shape и group содержат блоки для их содержимого - они определяют CSS2 "блок уровня блока".

... поэтому некоторые проблемы с компоновкой должны быть решены путем применения содержащего shape или же group элемент.

Источник
Другие вопросы по тегам