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

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

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

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

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

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

Ответ 1

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

border-left: 7px solid #fff;

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

Ответ 2

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

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

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

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

Ответ 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.

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

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

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