Макет электронной почты сломан в IE, изображение с colspan

Question

Макет электронной почты сломан в IE, изображение с colspan

0

У меня есть табличный HTML-макет HTML, который разбивается на IE. Я установил ширину 3 ячеек, затем в следующей строке я использую colspan 3 и поместите изображение равным ширине трех ячеек, что отрицает установленные ширины.

Полный пример сравнения: http://codepen.io/mikevoermans/pen/bLpjB

Выдержка из электронного письма:

<table width="500" cellpadding="0" cellspacing="0" border="1">

<tr>
    <td colspan="3" style="font-size: 1px; line-height: 1px; background: #838383;" height="10">&nbsp;</td>
</tr>

<tr>
    <td width="10%" style="background: #838383;">&nbsp;</td>
    <td width="84%" style="font-family: sans-serif; font-size: 10px; line-height: 16px; color: #f2f2f2; text-align: right; background: #838383;">
        Trouble viewing this message? 
    </td>
    <td width="6%" style="background: #838383;">&nbsp;</td>
</tr>

<tr>
    <td colspan="3"><!-- This is where it breaks the layout -->
        <img src="http://placedog.com/500/200" alt="" width="500" height="200" style="display:block; border:none;" />
    </td>
</tr>

<tr>
    <td>&nbsp;</td>
    <td>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </td>
    <td>&nbsp;</td>
</tr>

</table>

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

mikevoermans 09 окт. 2013, в 18:21

Источник

0

Я вижу исправление изображения с использованием встроенных стилей, но я думаю, что корень проблемы в том, что IE имеет проблему с% widths на вашем td .
Chris Rockwell 09 окт. 2013, в 16:12

Теги:

html

css

html-email

1 ответ

Ещё вопросы

Я вижу исправление изображения с использованием встроенных стилей, но я думаю, что корень проблемы в том, что IE имеет проблему с% widths на вашем td .

Kosta · Accepted Answer · 2013-10-09T14-01-00.000Z

Попробуйте использовать встроенный стиль, чтобы установить ширину изображения на 100% и высоту до 200 пикселей.

<img src="http://placedog.com/500/200" alt="" style="width:100%;height:200px;display:block; border:none;" />

Кажется, я могу сохранить атрибуты width и height и просто добавить width: 100% к тегу style, спасибо, это то, что я искал.