Я пытаюсь создать электронное письмо в формате HTML, которое будет правильно отображаться во всех широко используемых почтовых клиентах. Я помещаю все электронное письмо в таблицу, и мне бы хотелось, чтобы ее ширина составляла до 98% от доступной ширины, но не превышала 800 пикселей. Как это:
<table style="width:98%; max-width:800px;">
Но я так не делаю, поскольку согласно этому Outlook 2007 не поддерживает свойство ширины CSS.
Вместо этого я делаю следующее:
<table width="98%">
Есть ли способ также установить максимальную ширину, не полагаясь на CSS?
html
email
html-email
css
Тим Гудман
источник
источник
Ответы:
Да, есть способ имитировать
max-width
использование таблицы, что дает вам как адаптивный, так и удобный для Outlook макет. Более того, это решение не требует условных комментариев.Предположим , вы хотите эквивалент центрированное
div
сmax-width
из350px
. Вы создаете таблицу, устанавливаете ширину100%
. В таблице три ячейки подряд. Установите ширину центраTD
на350
(используяwidth
атрибут HTML , а не CSS), и готово.Если вы хотите, чтобы ваш контент был выровнен по левому краю, а не по центру, просто оставьте первую пустую ячейку.
Пример:
В jsfiddle я даю таблице рамку, чтобы вы могли видеть, что происходит, но, очевидно, в реальной жизни она вам не нужна:
http://jsfiddle.net/YcwM7/
источник
style="max-width: 100%; height: auto; width: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;"
<img src="file.jpg" "width="350" alt="" style="display:block;width:100%" />
litmus.com/community/discussions/…В Outlook 2007 можно сделать хитрость, используя условные html-комментарии.
Приведенный ниже код гарантирует, что таблица Outlook имеет ширину 800 пикселей, а не максимальную ширину, но это работает лучше, чем позволять таблице занимать все окно.
источник
Короткий ответ: нет.
Длинный ответ:
Фиксированные форматы лучше подходят для электронных писем HTML. По моему опыту, когда дело касается электронных писем в формате HTML, лучше всего притвориться 1999 годом. Будьте явными и используйте атрибуты HTML (width = "650"), где это возможно, в определениях таблиц, а не CSS (style = "width: 650px"). Используйте фиксированную ширину, без процентов. Ширина стола 650 пикселей - беспроигрышный вариант. Используйте встроенный CSS для установки свойств текста.
Дело не в том, что работает в «электронных письмах HTML», а в изобилии почтовых клиентов и их ограниченной (а иногда и преднамеренно в случае Gmail, Hotmail и т.д.) способности отображать HTML.
источник
Немного поздно на вечеринку, но это будет сделано. Я оставил пример на 600, так как это то, что будет использовать большинство людей:
Подобно примеру Шэя, за исключением того, что он также включает max-width для работы с остальными клиентами, у которых есть поддержка, а также второй метод предотвращения расширения (медиа-запрос), который необходим для Outlook '11.
В голове:
В организме:
Вот еще один пример использования этого: отзывчивые электронные письма с подтверждением заказа для мобильных устройств?
источник
Это решение, которое сработало для меня
https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , спасибо @ philipp-klinz
источник
max-width
. Все это заменит<div style="max-width: ...px">...</div>
. Для электронного письма, над которым я работал, когда я нашел эту суть, это было единственное решение, которое0px
padding
с иmargin
S, а также0
cellpadding
иcellspacing
. Возможно, указаниеline-height
будет работать как замена дляfont-size
заполнения в случаях, когдаheight
это не соблюдается (я бы хотел протестировать его на всех,tr
а затем на всех,td
чтобы точно увидеть, где это необходимо). @EdL, если вы можете получить более легкое решение, работающее так же хорошо, как это, было бы здорово -