Есть ли эквивалент CSS max-width, который работает в HTML-письмах?

Question

Есть ли эквивалент CSS max-width, который работает в HTML-письмах?

Я пытаюсь создать HTML-письмо, которое будет отображаться правильно во всех широко используемых почтовых клиентах. Я обертываю всю электронную почту в таблицу, и я хотел бы, чтобы она имела ширину до 98% от доступной ширины, но не более 800 пикселей. Вроде этого:
<table style="width:98%; max-width:800px;">

но я не делаю так, потому что по этому Outlook 2007 не поддерживает свойство CSS width.

вместо этого я делаю это:
<table width="98%">

есть любой способ также установить максимальную ширину, не полагаясь на CSS?

816 5

html css email html-email

5 ответов:

Comments

Ничего не найдено.

Mark Nugent · Accepted Answer · 2014-10-23 18:40:19

Да, есть способ, чтобы эмулировать max-width использование таблицы, что дает вам как отзывчивый, так и удобный для Outlook макет. Более того, это решение не требует условных комментариев.

Предположим, вы хотите, эквивалентной сосредоточенной div С max-width of 350px. Вы создаете таблицу, устанавливаете ширину в 100%. Таблица состоит из трех ячеек подряд. Установите ширину центра TD до 350 (используя HTML width атрибут, а не CSS), и там вы идете.

если вы хотите, чтобы ваш контент был выровнен по левому краю, а не по центру, просто оставьте первую пустую ячейку.

пример:
<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="350">The width of this cell should be a maximum of 
                  350 pixels, but shrink to widths less than 350 pixels.
        </td>
        <td></td>
     </tr>
</table> 
в jsfiddle я даю таблице границу, чтобы вы могли видеть, что происходит, но, очевидно, вы не хотели бы этого в реальной жизни:

http://jsfiddle.net/YcwM7/

Shay Erlichmen · Accepted Answer · 2011-09-01 22:27:39

есть трюк, который вы можете сделать для Outlook 2007 с помощью условных комментариев html.
Приведенный ниже код гарантирует, что таблица Outlook имеет ширину 800px, а не максимальную ширину, но она работает лучше, чем позволяет таблице охватывать все окно.


<table style="width:98%;max-width:800px">

    <tr><td>
    [Your Content Goes Here]
    </td></tr>

<table>

Diodeus - James MacFarlane · Accepted Answer · 2010-03-11 18:00:38

короткий ответ: нет.

длинный ответ:

фиксированные форматы лучше работают для HTML-писем. По моему опыту, вам лучше всего притворяться, что это 1999 год, когда дело доходит до HTML-писем. Будьте явными и используйте атрибуты HTML (width="650"), где это возможно в ваших определениях таблиц, а не CSS (style="width:650px"). Используйте фиксированную ширину, без процентов. Таблица шириной 650 пикселей является безопасной ставкой. Используйте встроенный CSS для установки свойств текста.

дело не в этом то, что работает в "HTML-письмах", а скорее множество почтовых клиентов и их ограниченная (а иногда и намеренно в случае Gmail, Hotmail и т. д.) способность отображать HTML.

John · Accepted Answer · 2017-05-23 15:10:45

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

похоже на пример шея, за исключением этого также включает в себя max-width для работы с остальными клиентами, которые имеют поддержку, а также второй способ предотвращения расширения (media query), который необходим для Outlook '11.

в голову:
  <style type="text/css">
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>
в теле:

<div class="maxW" style="max-width:600px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>
main content here
    </td>
  </tr>
</table>

</div>

вот еще один пример из этого в использовании:отзывчивые письма с подтверждением заказа для мобильных устройств?

henry · Accepted Answer · 2017-03-12 22:10:35

Это решение, которое сработало для меня

https://gist.github.com/elidickinson/5525752#gistcomment-1649300, Спасибо @philipp-klinz

<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>