Обходной путь для Outlook 2007 для обтекания текста вокруг изображения с полем?

Question

Как все мы знаем, Outlook 2007 использует движок рендеринга Word 2007, вызывая бесконечное горе при разработке сообщений электронной почты в формате HTML. [Вставьте сюда rant] В частности, float, margin и padding - скажем так? - плохо поддерживается.

Чтобы смоделировать float так, чтобы текст обернулся вокруг изображения, очевидно, мы можем просто использовать:

<img src="foo.png" align="right">

Проблема с отступом / полем. Без отступов / полей обернутый текст упирается в изображение, которое выглядит глупо. Одним из обходных путей является редактирование изображения и добавление прозрачных кадров, имитирующих поля.

Кто-нибудь знает другие обходные пути?

Answer 1

После прочтения документации Microsoft по поддержке Outlook 2007 я обнаружил, что использование hspace на изображении создаст вокруг него пустое пространство, подобное заполнению.

[img src = "image.jpg" align = "left" border = "0" hspace = "10"]

Это даст вам эквивалент 10px отступов. Работает довольно хорошо для почтовых клиентов.

Подумал, что поделюсь, если кто-то еще погуглит проблему, наткнется на этот вопрос, как я.

Answer 2

Я попробовал это сегодня утром и, к сожалению, граничит с изображениями, которые поддерживаются, однако вы можете реализовать концепцию в текстовой области :).

border-left: 7px solid #fff;

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

Answer 3

Единственное место, где в Outlook '07 поддерживается заполнение, - это <td> теги. Итак, я решил это, обернув изображение в таблицу:

<table cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
    <tr>
        <td>
        <table cellspacing="0" cellpadding="0" border="0" align="left">
        <tbody>
            <tr>
                <td valign="top" style="padding: 0px 10px 0 0;">
                <img src="http://www.mysite.com/images/myimage.jpg" style="width:60px; height:100px;" border="0" />
                </td>
            </tr>
        </tbody>
        </table>
        <p>The text I want to see wrap...</p>
        </td>
    </tr>
</tbody>
</table>

Обратите внимание, что align="left" находится на родительской таблице, а также на той, которая непосредственно содержит изображение. Этот взлом необходим для Outlook 2013. Все остальное прекрасно выглядело без него на Litmus.

Answer 4

Добавление отступов в изображении для Outlook и всех других почтовых клиентов. Я обнаружил, что это работает.

img {  
    padding-left: 25px!important;  
    padding-top: 25px!important;  
    padding-bottom: 25px!important;  
    padding-right: 25px!important;  
}

Answer 5

Я знаю, что эта ветка старая, но альтернативой было бы придать изображению сплошную границу того же цвета, что и контейнер.

Answer 6

Если вы добавите встроенный стиль к тегу img с помощью команды margin, например:

<img src="foo.png" align="right" style="margin:5px;">

Полагаю, это то, что вы пытаетесь сделать.